Angular JS: Search with parameters defined by select

Question

So I have a search box which has a few parameters that I want to limit my search by. This includes first name and last name in my example.

What I'm trying to achieve

So I've been trying to implement this like so. This is the code for the drop down list.

<select id="usersearchby" ng-model="searchFilter" ng-change="selectAction()">
        <option>Search By ...</option>
        <option value="lastName">Last Name</option>
        <option value="firstName">First Name</option>
</select>

This is the code for the input search field.

<input type="search" ng-if="searchFilter != 'firstName' && searchFilter != 'lastName'" ng-model="searchText">
<input type="search" ng-if="searchFilter == 'firstName'" ngModel="searchText.first_name">
<input type="search" ng-if="searchFilter == 'lastName'" ngModel="searchText.last_name">

This is the code for the div where the results are shown.

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: searchText">

This code doesn't work however, if I just have a single input search box for say first_name (no conditional inputs), it works just fine! What am I doing wrong? Is there a better way of doing this?

A sample of the json data I'm working with:

[{"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":1,"fax":"135–678-6357","first_name":"John","email":"[email protected]","username":"user1"},     {"role":"1","credentials":"","work_phone":"206–298–3059","last_name":"Doe","middle_name":"","suffix":"","title":"Mr.","mobile_phone":"1–877–932–4259","id":2,"fax":"135–678–6357","first_name":"Jane","email":"[email protected]","username":"user2"}]

Very basic: $http.get("/users").success(function(data) { $scope.users=data; }); The users data is in json with key value pairs for first_name and last_name among others. — geekchic
– geekchic, Commented Dec 8, 2014 at 6:48
It looks like there is something wrong with filter: searchText because now the value is in searchText.first_name or searchText.last_name — Wayne Ellery
– Wayne Ellery, Commented Dec 8, 2014 at 6:51
@WayneEllery I think you're right! But how do I avoid that? :/ — geekchic
– geekchic, Commented Dec 8, 2014 at 6:52

Wayne Ellery · Accepted Answer · 2014-12-08 09:32:11Z

Instead of having three textboxes it's much better to have one and use a filter function in your controller which will be used by the filter in the ng-repeat:

<input type="search" ng-model="searchText"/>

<div class="block_line_item userlist_expanded" ng-repeat="user in users | filter: filterUsers(searchText, searchFilter)">
        {{user.first_name + ' ' + user.last_name}}
</div>

$scope.filterUsers = function(searchText, searchFilter) {
    if (searchFilter === 'firstName') {
      return function (user) { return user.first_name.match(searchText); }
    }
    else if (searchFilter === 'lastName') {
      return function (user) { return user.last_name.match(searchText); }
    }
    else {
      return function (user) { return user.first_name.match(searchText) || user.last_name.match(searchText); }
    }
};

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

This is pretty much exactly what I ended up doing aside from one thing. searchFilter can be accessed by the scope i.e $scope.searchFilter so you don't have to pass it as an argument. Thanks for all the help!

Aman Dhanjal · Accepted Answer · 2014-12-08 11:07:44Z

You don't need to add 3 textboxes. It can be done if you put a watch expression on model of both the controls(search & select). All that needs to be done is filter on the basis of a variable which you would dynamically assign values to (inside the watch expressions). For example if you want to search on basis of first_Name, we set the myModel.first_Name = searchText & similarly for last_Name. In case of not selecting anything in the dropdown, we set myModel = searchText

HTML

     <select id="usersearchby" ng-model="searchFilter">
        <option>Search By ...</option>
        <option value="last_Name">Last Name</option>
        <option value="first_Name">First Name</option>
    </select>
    <input type="search" ng-Model="searchText">
    <br>

    <div>
    <br>
        All Data :- <br>
            {{ jsonStore }}
    </div>
    <br>

    Result:-
    <div ng-repeat="user in jsonStore | filter:filterModel">
        {{user}}
    </div>

JS

$scope.$watch('searchFilter', function(newValue) {
 var myModel={
        first_Name: "",
        last_Name: "",
      };
 if(angular.equals(newValue,'first_Name'))
   {
      myModel.first_Name=$scope.searchText;
   }
 else if(angular.equals(newValue,'last_Name'))
    {
      myModel.last_Name=$scope.searchText;
    }
    else
    {
     myModel=$scope.searchText;
    }
    $scope.filterModel=myModel;
   });

Same needs to be done for 'searchText'.

Refer this plnkr for the full code & giving it a test run:- http://plnkr.co/edit/q9Co9stjzXI62UlWczU3?p=preview

Deeptechtons · Accepted Answer · 2014-12-08 07:22:18Z

I think may be you are doing this hard way with more than one search text to handle. But i just put a plunkr to demonstrate a way to do this, but my idea might get out of hand in the case the number of parameters get out of bandwidth

Basically what i do is set states on which filters need to be applied

When the query text changes you need to apply the filters compounding the conditions using AND condition

Basic Setup of checkboxes goes with below

  $scope.shouldSearchWithFName = false;
  $scope.shouldSearchWithLName = false;
  $scope.searchText = "";

Plunkr http://plnkr.co/edit/nFV9s4XDrXGcmUYUPm8n?p=preview

Collectives™ on Stack Overflow

Angular JS: Search with parameters defined by select

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related