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.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

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

  14. |

    I have a json object which consists of a million data rows. I want to do a live search on this data. Will it be possible?

Leave a Comment