\

Real-Time Search With AngularJS Custom Filter

Real-Time Search With AngularJS 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.



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!

About This Author

Hi This Is Rehmaanali. Blogging Is Just A Hobby. Graduate In Bsc Computer Science

Post A Reply