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.

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

Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.
Can it to be combined with Ionic Framework? thanks 🙂
Yes you can.
because angular is easily compatible with ionic. please refer below link for implementation.
https://github.com/djett41/ionic-filter-bar
Thanks.
Works great! Thanks for the post.
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
Thanks! this helped a lot, Well explained from scratch!
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
How can I make a search bar that calls url?
Great article, it works for me 😀
Awesome tutorial! Thank you. It works great.
Thanks man!
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.
great article, but I wanted do the same in angular 2 ! can you please advise how it can be achieved using Angular 2 ?
is not work since angular 1.6, please help me? 🙁