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.


So, let’s start with 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,

        <title>Ajax Live search using AngularJs | Demo | Cipher Trick</title>
        <link href="css/site.css" rel="stylesheet" type="text/css" />
        <script src=""></script>
    <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" />
            <ul class="data-ctrl">
                <li ng-repeat="i in items | searchFor:searchString">
    <script src="js/site.js"></script>

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,

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

Now controller,

    $http.get('data.json').success(function(data, status, headers, config) {
        $scope.items =;
    }).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

app.filter('searchFor', function(){
    return function(arr, searchString){
            return arr;
        var result = [];
        searchString = searchString.toLowerCase();
        angular.forEach(arr, function(item){
            if(item.title.toLowerCase().indexOf(searchString) !== -1){
        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 .


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:


  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?

    • |

      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 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){
        }” to something like
        “angular.forEach(arr, function(item){
        if(item.value.toLowerCase().indexOf(searchString) !== -1){
        }” where item.title changes to item.value to search through the whole data?



  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?



    • |

      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.

  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.

  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