AngularJS Instant Search Example

AngularJS Instant Search Example – Tutorial

Hello friends. Today I am going to show you how to built an angularjs instant search example. To develop this application, we have used HTML, CSS, and Angular JS. This example will allow users to filter a list of items by typing into a text field. To achieve this, we first have to turn our application into a module.

Thus, we will make a custom filter. Angular relies on this technique for code isolation and requires that your application follows it before you can create a filter. There are only two things that you need to do to turn your app into a module:

Use the angular.module("name",[]) function call in your JS. This will instantiate and return a new module;
Pass the name of the module as the value of the ng-app directive.

Creating a filter then is as simple as calling the filter() method on the module object returned by angular.module("name", []).

FINAL OUTPUT:

STEP 1:

Create a index.html file.

[code]
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8"/>
<title>AngularJS – Instant Search Example Tutorial</title>

<!– The main CSS file –>
<link href="style.css" rel="stylesheet" />

<!–[if lt IE 9]>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<![endif]–>
</head>
<!– Initialize a new AngularJS app and associate it with a module named "instantSearch"–>
<body ng-app="instantSearch" ng-controller="InstantSearchController">
<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="i in items | searchFor:searchString"><a href="{{i.url}}"><img ng-src="{{i.image}}" /></a>
{{i.title}}</li></ul>
<!– Include AngularJS from Google’s CDN –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.0.7%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22script.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/code]

STEP 2:

Create a javascript file named script.js

[code]
// Define a new module for our app
var app = angular.module("instantSearch", []);

// Create the instant 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(arr, searchString){

if(!searchString){
return arr;
}

var result = [];

searchString = searchString.toLowerCase();

// Using the forEach helper method to loop through the array
angular.forEach(arr, function(item){

if(item.title.toLowerCase().indexOf(searchString) !== -1){
result.push(item);
}

});

return result;
};

});

// The controller

function InstantSearchController($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.items = [
{
url: ‘https://www.mehulprajapati.com/courses/android-training-in-mumbai-android-training-course-mumbai/’,
title: ‘Android Training In Mumbai’,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/android-mini-logo.jpg’
},
{
url: ‘https://www.mehulprajapati.com/courses/angularjs-training-in-mumbai-angular-training-course-mumbai/’,
title: ‘AngularJs Training Mumbai ‘,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/angularjs-mini-logo.jpg’
},
{
url: ‘https://www.mehulprajapati.com/courses/php-classes-mumbai-php-mysql-training/’,
title: ‘PHP Training’,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/html5-mini-logo.jpg’
},
{
url: ‘http://www.tutorialspoint.com/css/’,
title: ‘IOS Training Mumbai’,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/css-mini-logo.jpg’
},
{
url: ‘https://www.mehulprajapati.com/courses/java-training-course-in-mumbai/’,
title: ‘Java Course Mumbai’,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/java-mini-logo.jpg’
},
{
url: ‘https://www.mehulprajapati.com/courses/magento-course-in-mumbai-magento-training-in-mumbai/’,
title: ‘Magento Training Mumbai’,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/joomla-mini-logo.jpg’
},
{
url: ‘https://www.mehulprajapati.com/courses/python-training-in-mumbai/’,
title: ‘Python Training Mumbai’,
image: ‘https://www.mehulprajapati.comcode/demo/angular-instant-search/images/html-mini-logo.jpg’
}
];

}
[/code]

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.

Tags: AngularJS