Angular filter by text search and dropdown

Question

I'm having trouble and I can't seem to find an answer. I'm trying to filter using an text input box and a drop down menu. Its for a fantasy football app to give you an idea. Some code below

 <form class="form-inline search-width">
<input class="search form-control" type="text" ng-model="nameSearch.name">
<select class="form-control" ng-model="nameSearch.position">
    <option value="All">All</option>
    <option value="QB">QB</option>
    <option value="RB">RB</option>
    <option value="WR">WR</option>
    <option value="TE">TE</option>
    <option value="DEF">DEF</option>
    <option value="K">K</option>
</select>
    {{nameSearch.position}}
</form>
<ul class="list">

    <li ng-repeat="list in playerlist" 
        ng-click="PlayerSelected($event, this)">Rank: {{list.Rank}} Pos: {{list.Position}} {{list.Team}}</br>
        {{list.Last}}, {{list.First}} Bye: {{list.Bye}}</li>

</ul>

I have the faintest idea of how to make the search work with both inputs. The drop down should only search the position value. The input box can really seach anything.

Decarbonate

Can you also share the JS code for this or a better thing would be a fiddle. – Anybody

sure its all on github at github.com/jminterwebs/DraftBoard sorry not that familar with fiddle yet. – Decarbonate

Answer 1

Custom filter can be useful in your situation. That how I would solve this.

The filter:

angular.module('DraftBoard').filter('playersFilter', function () {
    return function (input, filterObject) {
        if (filterObject == undefined) { return input; }

        var searchName = filterObject.name.toLowerCase();
        var searchPosition = filterObject.position.toLowerCase();
        var out = [];
        if (input != undefined) {
            for (var i = 0; i < input.length; i++) {

                var firstName = input[i].First != undefined ? input[i].First.toString().toLowerCase() : '';
                var lastName = input[i].Last != undefined ? input[i].Last.toString().toLowerCase() : '';
                var team = input[i].Team != undefined ? input[i].Team.toString().toLowerCase() : '';
                var position = input[i].Position != undefined ? input[i].Position.toString().toLowerCase() : '';

                var filterCondition = ((searchPosition === 'all') || (position.indexOf(searchPosition) > -1))
                    && ((searchName == '') || (firstName.indexOf(searchName) > -1) || (lastName.indexOf(searchName) > -1) || (team.indexOf(searchName) > -1));

                if (filterCondition) {
                    out.push(input[i]);
                }
            }
        }
        return out;
    };
});

In your controller add this:

$scope.nameSearch = {
        name: '',
        position: 'All'
    };

And in the view use it this way:

<div class="selectionlist">
    <form class="form-inline search-width">
    <input class="search form-control" type="text" ng-model="nameSearch.name">
    <select class="form-control" ng-model="nameSearch.position">
        <option value="All">All</option>
        <option value="QB">QB</option>
        <option value="RB">RB</option>
        <option value="WR">WR</option>
        <option value="TE">TE</option>
        <option value="DEF">DEF</option>
        <option value="K">K</option>
    </select>
        {{nameSearch.position}}
    </form>
    <ul class="list">

        <li ng-repeat="list in playerlist | playersFilter:nameSearch "
            ng-click="PlayerSelected($event, this)">
            Rank: {{list.Rank}} Pos: {{list.Position}} {{list.Team}}</br>
            {{list.Last}}, {{list.First}} Bye: {{list.Bye}}
        </li>

    </ul>

</div>

Avoid

This is exactly what I was trying to do. Thanks. Now just need to figure out how it all works. – Decarbonate

@jminterwebs, nice to here that my answer has helped you. So, this filter is pretty simple: you got two parameters (original array 'input' and filter criteria 'filterObject') as input parameters. Then inside a filter function you select some items from original array depending on filter criteria and your business logic. And then return selected items as an array. – Avoid

Answer 2

You should use the filter option from ng-repeat, here is an example for you to check, I hope this help you.

Unchancy

Thanks huge improvment. Still a little buggy. Will only let me search either or. Ideally I want to set drop down to a value then search that value. – Decarbonate

The dropdown has model, filter, what it does is watch his property changes, so every time the model change filter will react, try changing it directly in the controller to give you an idea – Unchancy

Answer 3

Change your <select>'s ng-model to nameSearch.Position(uppercase P) so that it matches the position field name of playerlist

   <select class="form-control" ng-model="nameSearch.Position">

Then change your ng-repeat second filter to nameSearch instead of nameSearch.position.

 ng-repeat="list in playerlist | filter:searchname | filter: nameSearch"

If you have search inputs with the same name as the object's attributes(eg:nameSearch.Position same as playerlist.Position), filtering just by the filter object(nameSearch) without the filter attribute(Position) will search mapping the respective attributes with same name.

UPDATE: The above will help you getting the Position dropdown search fixed.
For the name, use a custom filter as below.
Please note searchname is added as a filter in ng-repeat and keep your search input's ng-model a non object. For the below controller you would have to keep it as
<input class="search form-control" type="text" ng-model="nameSearch">

Controller:

$scope.searchname = function (row) {
        return (angular.lowercase(row.First).indexOf($scope.nameSearch || '') !== -1 || angular.lowercase(row.Last).indexOf($scope.nameSearch || '') !== -1);
    };

Hope this helped.

Anybody

Answer 4

Here u can find custom filter for dropdown and search

i hope this Code will help with something new way !

Boomer

Answer 5

here is my crack at this http://jsfiddle.net/0ey84dwu/

HTML: Use ng-repeat and filter it by the text input. Also, use ng-options

    <div ng-app="TestApp">
        <div ng-controller="TestController">
            <input class="search form-control" type="text" ng-model="nameSearch.name">
            <select class="form-control" ng-options="position as position for position in positions" ng-model="nameSearch.position" ng-change="setPosition()">
            </select>

            <div ng-repeat="player in players | filter: nameSearch.name">
               {{player.First}} {{player.Last}}
            </div>
        </div>
    </div>

And then the JS: Have an array of all the players. Depending on your selection of the dropdown, add those players to a new array that contain only players of the selected position. Selecting All will set $scope.players = $scope.allPlayers thus filtering all players by whatever you are searching.

var app = angular.module('TestApp',[]);

app.controller('TestController', function($scope)
{
  $scope.nameSearch = {};
  $scope.nameSearch.position = 'All';
  $scope.positions = ['All','QB','RB','WR','TE','DEF','K'];
  $scope.players = $scope.allPlayers;

  $scope.setPosition = function()
  {
    $scope.players = [];
    if ($scope.nameSearch.position != 'All')
    {
       for (var i in $scope.allPlayers) if ($scope.allPlayers[i].Position == $scope.nameSearch.position) $scope.players.push($scope.allPlayers[i]);   
       return;
     }
     $scope.players = $scope.allPlayers;
  };

  $scope.allPlayers = [
  {
    "Rank":1,
    "First":"Le'Veon",
    "Last":"Bell",
    "Position":"RB",
    "Team":"PIT",
    "Bye Week":11
  },
  {
    "Rank":2,
    "First":"Jamaal",
    "Last":"Charles",
    "Position":"RB",
    "Team":"KC",
    "Bye Week":9
  },
  {
    "Rank":3,
    "First":"Adrian",
    "Last":"Peterson",
    "Position":"RB",
    "Team":"MIN",
    "Bye Week":5
  }...
  ...
  ..
  ...];

  $scope.setPosition();

});

You could write a custom filter and shorten this code even more

Vaseline

How would one go about a custom filter. – Decarbonate

Answer 6

ui.bootstrap.typeahead plugin may be what you need:

http://angular-ui.github.io/bootstrap/

Screenshot: https://i.sstatic.net/VJenP.png

It adds an uib-typeahead attribute to the <input> tag.

A usage example:

<input type="text" ng-model="customPopupSelected" 
    placeholder="Custom popup template" 
    uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" 
    typeahead-popup-template-url="customPopupTemplate.html" 
    class="form-control">

Quotes from its documentation:

Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input.

It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. Supported expressions are:

label for value in sourceArray select as label for value in sourceArray The sourceArray expression can use a special $viewValue variable that >corresponds to the value entered inside the input.

This directive works with promises, meaning you can retrieve matches using the >$http service with minimal effort.

Pottle