All AngularJS Javascript
Inaam  

Live search using custom filter in Angular Js

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 .
 

17 thoughts on “Live search using custom filter in Angular Js

  1. FX Bayu Anggara

    Can it to be combined with Ionic Framework? thanks 🙂

    1. Inaam Hussain

      Yes you can.
      because angular is easily compatible with ionic. please refer below link for implementation.
      https://github.com/djett41/ionic-filter-bar
      Thanks.

  2. missggnyc

    Works great! Thanks for the post.

  3. GG

    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?

    1. Inaam Hussain

      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.

      1. GG

        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

    1. Inaam Hussain

      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. Ani

    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?

    1. Inaam Hussain

      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? 🙁

Leave A Comment