CODEWITHSUNDEEP
javascriptangularjsangular-ng-if
geekchic
geekchic

Reputation: 2431

Angular JS: Search with parameters defined by select

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"}]

Upvotes: 1

Views: 1165

Answers (3)

Aman Dhanjal
Aman Dhanjal

Reputation: 414

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

Upvotes: 2

Wayne Ellery
Wayne Ellery

Reputation: 7958

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

Upvotes: 2

Deeptechtons
Deeptechtons

Reputation: 11125

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

Upvotes: 1

Related Questions