how to create a multiple search using AngularJs

Question

What should i do if i want to find such combination position + nationality if i type for instance Keeper England

<section ng-controller="searchController">
                    <input class="field" ng-model="searchField">
                    <div id="update">
                        <ul>
                            <li ng-repeat="item in players | filter: searchField | orderBy: playersOrder">
                                <p class="name">{{item.name}}</p>
                                <p>{{item.position}}</p>
                                <p>{{item.jerseyNumber}}</p>
                                <p>{{item.dateOfBirth}}</p>
                                <p>{{item.nationality}}</p>
                                <p>{{item.contractUntil}}</p>
                                <p>{{item.marketValue}}</p>
                            </li>
                        </ul>
                    </div>
                </section>

var myApp = angular.module("myApp", []);

myApp.controller("searchController", function($scope, $http) {
    $http.get("scripts/players.json").success(function(data) {
        $scope.players = data;
        $scope.playersOrder = 'name';
    });
});

json file: players {
"id":2138, "name":"Thibaut Courtois", "position":"Keeper", "jerseyNumber":13, "dateOfBirth":"1992-05-11", "nationality":"Belgium"" }, {
"id":2140, "name":"Jamal Blackman", "position":"Keeper", "jerseyNumber":27, "dateOfBirth":"1993-10-27", "nationality":"England" },

Yosvel Quintero · Accepted Answer · 2016-07-17 17:13:20Z

In AngularJS you can create a filter function:

angular
    .module('myApp', [])
    .controller('searchController', function($scope) {
        // the json response
        $scope.players = [{"id": 2138,"name": "Thibaut Courtois","position": "Keeper","jerseyNumber": 13,"dateOfBirth": "1992-05-11","nationality": "Belgium"}, {"id": 2140,"name": "Jamal Blackman","position": "Keeper","jerseyNumber": 27,"dateOfBirth": "1993-10-27","nationality": "England"}];
        $scope.playersOrder = 'name';
        $scope.searchField = '';
        $scope.myFileterFunction = function(row) {
            var query = angular.lowercase($scope.searchField);
            if (query.indexOf(' ')) {
                var query_array = query.split(' ');
                var search_result = false;
                for (var x in query_array) {
                    query = query_array[x];
                    search_result = (angular.lowercase(row.position).indexOf(query || '') !== -1 
                        || angular.lowercase(row.nationality).indexOf(query || '') !== -1)  
                        ? true 
                        : false;
                }
                return search_result;
            }
            return (angular.lowercase(row.position).indexOf(query || '') !== -1 
                    || angular.lowercase(row.nationality).indexOf(query || '') !== -1);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="myApp" ng-controller="searchController">
  <input class="field" ng-model="searchField">
  <div id="update">
    <ul>
      <li ng-repeat="item in players | filter: myFileterFunction">
        <p class="name">{{item.name}}</p>
        <p>{{item.position}}</p>
        <p>{{item.nationality}}</p>
      </li>
    </ul>
  </div>
</section>

Sajal · Accepted Answer · 2016-07-17 11:26:59Z

1

Creating a filter function filterBy which would have the item object in item in players:

<li ng-repeat="item in players | filter: filterBy | orderBy: playersOrder">
 ...
</li>

Below Method checks if the item matches the search query for Name and Nationality:

$scope.filterBy = function (item) {
 return item.name.toLowerCase().indexOf($scope.searchField.toLowerCase()) != -1 || 
        item.nationality.toLowerCase().indexOf($scope.searchField.toLowerCase()) != -1
 };

answered Jul 17, 2016 at 11:26

Sajal

4,4111 gold badge22 silver badges41 bronze badges

Comments

Abdul Mateen Mohammed · Accepted Answer · 2016-07-17 12:01:26Z

@Dima Vleskov you can roll your own filter, by creating a custom filter.

angular
  .module('euro2016', [])
  .controller('DefaultController', DefaultController)
  .filter('searchPlayer', searchPlayer);
  
  function DefaultController() {
    var vm = this;
    vm.players = players;
  }
  
  searchPlayer.$inject = ['$filter'];
  
  function searchPlayer($filter) {
    return function(data, param) {
      if (angular.isArray(data) && angular.isDefined(param)) {
        var params = param.split(' ');
        if (angular.isDefined(params) && params.length === 2) {        
          var searchTerm = { 
            position: params[0],
            nationality: params[1]
          };
          
          var players = $filter('filter')(data, searchTerm);
          
          return players;
        }
      }
      
      return data;
    }
  }
  
  var players = [
  { id: 1, name: 'Jack Butland', position: 'Keeper', nationality: 'England', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/butland_3548459k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' },
  { id: 2, name: 'Thibaut Courtois', position: 'Keeper', nationality: 'Belgium', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/Thibaut_Courtois_3138923k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' },
  { id: 3, name: 'Marc-Andre ter Stegen', position: 'Keeper', nationality: 'Germany', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/ter-stegen_3548100k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' },
  { id: 4, name: 'Joe Hart', position: 'Keeper', nationality: 'England', img: 'http://www.telegraph.co.uk/content/dam/football/2016/01/25/Joe_Hart_3138807k-large_trans++qVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg' }
  ];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="euro2016">
  <div ng-controller="DefaultController as ctrl">
    <label>Search</label>&nbsp;<input type="text" ng-model="ctrl.searchTerm">
    <div ng-repeat="player in ctrl.players | searchPlayer: ctrl.searchTerm">
      <h2>{{player.name}} {{player.nationality}}</h2>
      <img ng-src="{{player.img}}" style="height: 200px;"/>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

how to create a multiple search using AngularJs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related