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

Ajax Live search using AngularJs | Demo | Cipher Trick

Ajax Live search using AngularJs

  • {{i.title}}


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 Comments

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

      Reply

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

        Reply

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

    Thanks,

    Anke

    Reply

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *