Learn to build a Search Engine using AngularJS

By | December 8, 2017

Usually, most of the applications, websites which we use in day-to-day life have a provision to search for something we want specifically. This functionality achieved through a search engine (Learn how a search engine works). It will filter out the results as user types-in in the search bar. It displays only those items which contain the word/char typed into the search bar. This feature is a must and required when you have loads of data and you would want to search for something immediately and the similar content. The most well-known search engine is Google search engine which has acquired about 80% of all the search engines (know how Google search engine works). Baidu, Bing, Yahoo, Ask, AOL features next. Read more on Anatomy and Working of Search Engines.

In this article, we will learn to build a search engine in AngularJS. We will demonstrate it using a simple example. In this example, we have a list of top English movie names. You can filter out your favorite ones by searching in the search bar.

Suggested Read:

In our example, we follow the directory structure as shown below.

Directory structure for Search Engine Example using AngularJS

As shown above, we have three files namely a base shell page “index.html”, an application module/controller “app.js” and a styling page “style.css”. The base shell index page, as we know is the main page which is responsible for loading all the scripts required for an application to run. So for an angular app to run, we need an angular script to be loaded as shown in below code.

In the index page, we have a simple input of type text and movie names are listed below the input along with their releasing year using ‘ul’ control.

<!DOCTYPE html>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="app.js"></script>
   <!-- Initialize a new AngularJS app and associate it
        with a module named "instantSearch"-->
    <div ng-app="searchApp" ng-controller="searchController" style="width:500px">
            <h2>Search Engine Example</h2>
          <div style="margin:20px">
               Below you have list of top english movie names. 
               You can make use of instant search engine to search 
               your favourite movie.
          <div class="bar">
              <!-- Create a binding between the searchString model 
              and the text field -->
              <input type="text" ng-model="searchString" 
                     placeholder="Enter your search terms" />
              <!-- Render a li element for every entry in the items array. Notice
                   the custom search filter "searchFor". It takes the value of the
                   searchString model as an argument.
              <li ng-repeat="m in movies | searchFor:searchString">
                <p>{{m.releaseYr}} : {{m.name}}</p>


Next, we need a javascript file to create an application module and to have the controller. Please take a look at app.js as shown below.

// Define a new module for our app. The array holds names of dependencies if any.
var app = angular.module("searchApp", []);

// Create the search filter
app.filter('searchFor', function(){
    // All filters must return a function. The first parameter
    // is the data that is to be filtered, and the second is an
    // argument that may be passed with a colon (searchFor:searchString)
    return function(dataArr, searchString){

            return dataArr;
        var result = [];
        searchString = searchString.toLowerCase();

        // Using the forEach helper method to loop through the array
        angular.forEach(dataArr, function(item){
            if(item.name.toLowerCase().indexOf(searchString) !== -1){
        return result;

// The controller
function searchController($scope){
    // The data model. These items would normally be requested via AJAX,
    // but are hardcoded here for simplicity. See the next example for
    // tips on using AJAX.
    $scope.movies = [
        {name:"The Godfather",releaseYr:"1972"},
        {name:"Forest Gump",releaseYr:"1994"},
        {name:"Star Wars",releaseYr:"1977"},
        {name:"Justice League",releaseYr:"2017"},
        {name:"The Dark Knight",releaseYr:"2008"},
        {name:"The Avengers",releaseYr:"2012"}


Angular filters are used to filter out the results based on some filter expression provided. For example in some case where we need, the results for a particular time period. So here time period is the filter expression.

Angular provides few built-in filters as well as supports custom filter creation. The custom filter should hold the meaningful name in the sense for which task/logic it is being used so that anyone can easily understand the code.

So in the above example, we have created custom filter named as “searchFor”. As the name indicates, it is used for searching the movies based on provided search string(word typed in the search bar).

We also have a controller “searchController” wherein we have the array of top English movie names attached to $scope element. This data we can get through AJAX call but as we are demonstrating in a simple way, we have mocked the data.


To have the good look and feel of the UI, we are using CSS style for the UI controls. Let’s take a look at the CSS file as shown below.

/* Styles go here */

    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;

a, a:visited {


section, footer, header, aside, nav{
    display: block;

    The search input


    background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:linear-gradient(top, #5c9bb7, #5392ad);

    box-shadow: 0 1px 1px #ccc;
    border-radius: 2px;
    width: 400px;
    padding: 14px;
    margin: 45px auto 20px;

.bar input{
    background:#fff no-repeat 13px 13px;

    border: none;
    width: 100%;
    line-height: 19px;
    padding: 11px 0;

    border-radius: 2px;
    box-shadow: 0 2px 8px #c4c4c4 inset;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    color: #738289;
    font-weight: bold;
    outline: none;
    text-indent: 40px;

    list-style: none;
    width: 428px;
    margin: 0 auto;
    text-align: left;

ul li{
    border-bottom: 1px solid #ddd;
    padding: 10px;
    overflow: hidden;

ul li img{

ul li p{
    margin-left: 75px;
    font-weight: bold;
    padding-top: 12px;

As we see in the above CSS file, for each control we are applying styles.

Now, let us have a look at the output of this example. The image shows the initial view when the application is bootstrapped. (taken half screen just to show the UI. In the actual example, all movies are listed)

Learn to build a Search Engine using AngularJS

When the user starts typing in the search bar, the results get filtered-out according to typed word.

Search Engine example using AngularJS

Search Results

Search Engine with angularJS showing results

Search Results

As you press the backspace, the results appear as per the initial version but with the expression text, the matched content is shown.


The search engine is the basic and most needful feature in any application. This is required to reduce the time of a customer or a user in searching something they need. Read more examples on AngularJS.

Suggested articles for you:

One thought on “Learn to build a Search Engine using AngularJS

  1. blankDivakar LN

    thank you, nice article about ho angular works on building the search Engine. But just need one clarification which version of angular is good to build the application.


Did it help? Comment here..