When you visit an e-commerce application or website you may have searched for a product you want to buy. This functionality is achieved through a search engine. It will filter out the results based on the user’s words in the search bar. It displays only those items which contain the word typed in 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. The most well-known search engine is Google search engine which has acquired about 80% of all the search engines. Baidu, Bing, Yahoo, Ask, and AOL features next. Understand how a search engine works and how the Google search engine works.
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
In our example, we follow the directory structure as shown below.
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 that 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 the 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 release year using the ‘ul’ control.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- Initialize a new AngularJS app and associate it
with a module named "instantSearch"-->
<div ng-app="searchApp" ng-controller="searchController" style="width:500px">
<div>
<h2>Search Engine Example</h2>
</div>
<div style="margin:20px">
<p>
Below you have list of top english movie names.
You can make use of instant search engine to search
your favourite movie.
</p>
</div>
<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" />
</div>
<ul>
<!-- 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>
</li>
</ul>
</div>
</body>
</html>
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.
app.js
// 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){
if(!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){
result.push(item);
}
});
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:"Inception",releaseYr:"2010"},
{name:"Titanic",releaseYr:"1997"},
{name:"Thor:Ragnarok",releaseYr:"2017"},
{name:"Forest Gump",releaseYr:"1994"},
{name:"Star Wars",releaseYr:"1977"},
{name:"Justice League",releaseYr:"2017"},
{name:"The Dark Knight",releaseYr:"2008"},
{name:"Avatar",releaseYr:"2009"},
{name:"The Avengers",releaseYr:"2012"}
];}
Angular filters are used to filter out the results based on some filter expressions provided. For example in some cases where we need, the results for a particular time period. So here time period is the filter expression.
Angular provides a few built-in filters as well as supports custom filter creation. The custom filter should hold a meaningful name in the sense of which task/logic it is being used so that anyone can easily understand the code.
So in the above example, we have created a custom filter named “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 the $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 a 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.
style.css
*{
margin:0;
padding:0;
}
body{
font:15px/1.3 'Open Sans', sans-serif;
color: #5e5b64;
text-align:center;
}
a, a:visited {
outline:none;
color:#389dc1;
}
a:hover{
text-decoration:none;
}
section, footer, header, aside, nav{
display: block;
}
/*-------------------------
The search input
--------------------------*/
.bar{
background-color:#5c9bb7;
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;
position:relative;
}
.bar input{
background:#fff no-repeat 13px 13px;
background-image:url(data:image/png;base64,i.....I=);
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;
}
ul{
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{
width:60px;
height:60px;
float:left;
border:none;
}
ul li p{
margin-left: 75px;
font-weight: bold;
padding-top: 12px;
color:#6e7a7f;
}
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)
When the user starts typing in the search bar, the results get filtered out according to the typed word.
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 in searching for something based on keywords.
More Examples on AngularJS
Simple Login Example in AngularJS
Navigation Menu Creation Example using AngularJS
User Registration Form Example in AngularJS
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.