Live search using custom filter in Angular Js

February 7, 2015
by Inaam Hussain

In this tutorial we will implement search with angular js.We will be creating a custom filter to achieve this and not the default search provided by angular.

DEMO  DOWNLOAD

So, let’s start with folder structure.

ajax_search_folder_structure

Folder Structure

Here above you can see folder structure with css , js & Json file. in which data.json contains temporary json data to which we will do an ajax call from front-end and display data on screen.

First start with main index html file code,

index.html
<html>
    <head>
        <title>Ajax Live search using AngularJs | Demo | Cipher Trick</title>
        <link href="css/site.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    </head>
    <body ng-app="instantsearch">
        <div ng-controller="instantSearchCtrl">
            <h3 class="headName">Ajax Live search using AngularJs</h3>
            <div class="bar">
                <input type="text" class="search" ng-model="searchString" placeholder="Enter your search terms" />
            </div>
            <ul class="data-ctrl">
                <li ng-repeat="i in items | searchFor:searchString">
                    <p>{{i.title}}
                </li>
            </ul>
        </div>
    </body>
    <script src="js/site.js"></script>
</html>

In above code you can see that we have defined ng-app ng-controller to main Body & div  ( i.e : ng-app=”instantsearch” & ng-controller=”instantSearchCtrl ).

And ng-model to search input box ( i.e : ng-model=”searchString” ). that is basically binding the view in to the model.

ng-repeat to li so that will list down the data based on search from input text box. ( i.e : i in items | searchFor:searchString )

  •  i in items : Display list of data which is present in items.
  • searchFor:searchString : Display filtered data which is search from input search box.

Create App module & Controller

First will create App module,

site.js
  var app = angular.module('instantsearch',[]);

 
Now controller,

site.js
app.controller('instantSearchCtrl',function($scope,$http){
    $http.get('data.json').success(function(data, status, headers, config) {
        $scope.items = data.data;
    }).error(function(data, status, headers, config) {
        console.log("No data found..");
  });
});

By using ajax $http.get() will get data from data.json and assign that data to $scope of items. see above code,

Search Filter

site.js
app.filter('searchFor', function(){
    return function(arr, searchString){
        if(!searchString){
            return arr;
        }
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item){
            if(item.title.toLowerCase().indexOf(searchString) !== -1){
            result.push(item);
        }
        });
        return result;
    };
});

We can see that in filter checking Expression & Comparator .

In which we are checking particular search term (i.e : title) and based on that we are returning data and displaying in UI .
 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

18 comments

  1. |

    Can it to be combined with Ionic Framework? thanks 🙂

  2. |

    Works great! Thanks for the post.

  3. |

    Thanks! How would you write it if you’re not just searching for the title in your json but any object values like id, etc?

    • |

      Hi,
      If you want find in whole object data. then you just need to add in ng-repeat ‘ng-repeat=”friend in friends | filter:searchText”‘. where “searchText” is ng-model of text input.
      So that will give you results based on id as well.
      Thanks.

      • |

        Hello,

        Thanks for the input but I don’t think I am understanding your suggestion. So if we’re using your example and wanting to do the whole object data search, then wouldn’t I need to change this part “angular.forEach(arr, function(item){
        if(item.title.toLowerCase().indexOf(searchString) !== -1){
        result.push(item);
        }” to something like
        “angular.forEach(arr, function(item){
        if(item.value.toLowerCase().indexOf(searchString) !== -1){
        result.push(item);
        }” where item.title changes to item.value to search through the whole data?

        Thanks,

        GG

  4. Sheetal
    |

    Thanks! this helped a lot, Well explained from scratch!

  5. Anke
    |

    Thank you, very clear explenation. This works perfect.
    Do you know how i can search on multiple properties of an object?

    Thanks,

    Anke

    • |

      Yes you can Anke.
      Just have to add OR condition with new fields check in if statements. and that will check for multiple fields of object.
      Thanks

  6. |

    How can I make a search bar that calls url?

  7. JeffreyTCK
    |

    Great article, it works for me 😀

  8. G. Booth
    |

    Awesome tutorial! Thank you. It works great.

  9. alePanta
    |

    Thanks man!

  10. pepepaco
    |

    is there any way to filter server side?

    • |

      Yes, need to call that API based on model text value changes and updated data which are in ng-repeat.
      Thanks.

  11. Vishal
    |

    great article, but I wanted do the same in angular 2 ! can you please advise how it can be achieved using Angular 2 ?

  12. Bris Fernando
    |

    is not work since angular 1.6, please help me? 🙁

  13. |

    can you please uplode data.json file?

Leave a Comment