Real-Time Search With AngularJS Custom Filter

on June 20, 2017
πŸ”₯ 5180 views
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.



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!

Tags: , , , , ,