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.

 

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.

 

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.

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.

Conclusion:

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:

Did it help? Comment here..

This site uses Akismet to reduce spam. Learn how your comment data is processed.