Contents hide 1) Filters ? 2) Implementation 3) JSON Data 3.1) Angular App 4) Custom Filter In this tutorial, we will see how to create Real-Time Search With AngularJS Custom Filter. We will be creating a custom filter to achieve this and not the default search provided by Angular. Check out the demo on how to create Real-Time Search With AngularJS Custom Filter. Demo Filters ? Filters are used to change modify the data and can be clubbed in expression or directives using pipe character. Following is the list of commonly used filters. Sr.No Name Description 1 uppercase converts a text to upper case text. 2 lowercase converts a text to lower case text. 3 currency formats text in a currency format. 4 filter filter the array to a subset of it based on provided criteria. 5 orderby orders the array based on provided criteria. Implementation To create a real-time search we will be using the AngularJS. letβs start with implementing the dependencies. Now include the required libraries into our index.html index.html <html> <head> <title>Real Time Search With AngularJS Custom Filter</title> </head> <body> <h1>Real Time Search With AngularJS Custom Filter</h1> <!-- OUR APP GOES HERE --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script src="app.js"></script> </body> </html> Here you can see we have loaded our libraries at the bottom of the page i.e Angular.min.js, and our main app file app.js. BASH $ npm install angular --save // AngularJS JSON Data To create a live search we have to create a JSON data from which the angular will filter the result. So letβs begin with creating the JSON data. JSON Format Data { "name": "burger 1", "type": "non-veg", "price": 120 }, { "name": "burger 2", "type": "veg", "price": 50 }, { "name": "coke 1", "type": "veg", "price": 40 }, { "name": "coke 2", "type": "veg", "price": 35 }, { // Additional JSON Data } Angular App Now letβs create our angular application from which the data is being filtered. create an app.js file as we have declared in our index.html file. app.js var foods = angular.module('foods', []); foods.controller('foodsListCtrl', function($scope) { $scope.foods = [ { "name": "burger 1", "type": "non-veg", "price": 120 }, { "name": "burger 2", "type": "veg", "price": 50 }, { // addtitional json data } ]; $scope.orderList = "name"; }); Custom Filter Now, will design our index.html page, in which it will contain an input text field and our list of JSON data. index.html <body> <h1>Real Time Search With AngularJS Custom Filter</h1> <div id="foods" ng-app="foods" ng-controller="foodsListCtrl"> <p>`Menu</p> <input type="text" id="query" ng-model="query" /> <select ng-model="orderList"> <option value="name">By name</option> <option value="price">Expensive</option> <option value="-price">Expensive</option> </select> <ul id="food_ul"> <li ng-repeat="food in foods | filter:query | orderBy: orderList"> name: {{food.name}}<br/><br/> type: {{food.type}}<br/> <div class="right top">RS : {{food.price}}</div> </li> </ul> <span>Number of foods: {{foods.length}}</span> </div> </body> Here you can see we have defined a filter to the list and that list is bind with id βqueryβ, in which it will check the selected option and in that manner, it will display the list. Check Out The Code Snippet And Demo HERE! Real-Time Search Demo Get Some More Angular Here! Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: angularjs, filter, html5, JavaScript, js, json