Search-by filter in Angular.js,

I've created a plunkr. You can define properties on the search query to filter by. In the select you choose the property you want to filter by and assign it to the search query.

http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview


Simple and flexible jsfiddle.

Can mention the filter fields also 

filterFields: [
  "name",
  "company"
]

An example you refer to uses object to specify filter keys, while your code always sends a string, and this is the main issue cause.

Let's assume I've typed "e" into search field. Without "Search by" selected, the filter would search for "e" in every key value. When we select value from "Search by", query string becomes current option's value ("name", "company" or "designation"), and will proceed in the same scenatio as "e", except without any result, because there aren't any matches in test data.

The proper way to choose "search by" would be contructing an object with a single key named as chosen option, equal to search query. So, if the user searches for name with "sh", it will be:

{
    name: "sh"
}

In case when no option chosen yet, the property should be named "$", this way filter will search among all properties.

I've fixed the code to work as intended (link). How you implement this is another question, but I went by defining queryFilter object on $scope, with getter which returns object of desired format.

.controller("empCtrl", function($scope) {
  Object.defineProperty($scope, "queryFilter", {
      get: function() {
          var out = {};
          out[$scope.queryBy || "$"] = $scope.query;
          return out;
      }
  })
...

<body ng-controller="empCtrl">      
    <table>
        <tr>
            <td align="right">Search :</td>
            <td><input ng-model="query" /></td>
        </tr>           
        <tr>
            <td align="right">Search By :</td>
            <td>
                <select ng-model="queryBy">
                    <option value="name">NAME</option>
                    <option value="company">COMPANY</option>
                    <option value="designation">DESIGNATION</option>
                </select>   
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <table>
            <tr>
                <th>Employee Name</th>
                <th>Company Name</th>
                <th>Designation</th>
            </tr>
            <tr ng-repeat="emp in employees | filter:queryFilter">
                <td>{{emp.name}}</td>
                <td>{{emp.company}}</td>
                <td>{{emp.designation}}</td>
            </tr>
        </table>
    </div>
</body>

Tags:

Javascript

Angularjs

Single Page Application

Recent Posts