In this article I will provide you something new and interesting, a Search Engine using Angular JavaScript. This is new and simple in comparison to search engines in other languages. What it requires is your basic knowledge of HTML, CSS and JavaScript.
Functioning
This search engine will allow users of your website to mine the required content from the list of items, by sampling typing or giving input in the search box.
For some operational work, we will use the functionality of Angular JavaScript.
Steps | Functioning
- For doing the base functionality we will use:
angular.module(“name”, [])
(the function and call it in your JavaScript code.)
- This will initiate a new module in our base code.
- Afterwards it will return that newly created module for functioning.
- Now we will pass the name of the module as the value of the ng-app directive.
Coding
We will perform the coding using HTML, CSS and JavaScript.
HTML Coding
In this part we are giving a structural part and calling Angular JavaScript functions via JavaScript.
![HTML Coding]()
Code | Snippet
<div ng-aoo="Search" ng-controller="SearchController">
<div class="bar">
<input type="text" ng-model="searchString" placeholder="Explore here"
</div>
<ul>
<li ng-repeat="i in items | searchFor:searchString">
<a href="{{i.url}}"> <img ng-src="{{i.image}}" /> </a>
<p> {{i.title}}</p>
</li>
</ul>
</div>
CSS Coding
In this section I will define some design work and also some structure and other necessary basic functionalities.
![CSS Coding]()
Code | Snippet*(
margin:1;
padding:0;
}
body
{
font:15px/1.4 tahoma'', tahoma;
color: Fuchsia;
text-align:center;
}
a, a:visited
{
outline:none;
color:Teal;
}
a:hover
{
text-decoration:blink;
}
section, footer, header, aside, nav
{
display:block;
}
.bar
{
background-color:inherit;
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: 320px;
padding: 12px;
margin: 40px auto 15px;
position: relative;
}
.bar input
{
background:#fff no-repeat 12px 12px;
background-image:url()
border:none;
width: 100%;
line-height:16px;
padding: 11px 0;
border-radius: 2px;
box-shadow: 0 2px 2px #c4c4c4 inset;
text-align:left;
font-size: 12px;
font-family:inherit;
color:#738289;
font-weight:bold;
outline:none;
text-indent: 40px;
}
ul
{
list-style:none;
width:320px;
margin: 0 auto;
text-align: left;
}
ul li
{
border-bottom: 1px sloid #ddd;
padding: 10px;
overflow: hidden;
}
ul li img
{
width:inherit;
height:inherit;
float:left;
border:none;
}
ul li p
{
margin-left: 75px;
font-weight:bold;
padding-top:12px;
color:#6e7a7f;
}
JavaScript Coding
It is the major and most important part of this application, in this section we will define the calling functionalities and this section will define "how our search box will work in reality".
![JavaScript Coding]()
Calling will get performed according to this-
![Calling]()
Code | Snippet
var app = angular.module("Search", []);
app.filter('searchFor', function()
{
return function(arr, searchString)
{
if(!searchString)
{
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function(item)
{
if(item.toLowerCase().indexof(searchString)! == -1)
{
result.push(itme);
}
});
return tresult;
};
});
function InstantSearchController($scope)
{
$scope.items = [
{
url: 'http://cshub.somee.com/5G.aspx',
title: '5G Technology',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Blue_Brain.aspx',
title: 'Blue Brain',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Li-Fi.aspx',
title: 'Li-Fi Technology',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Pervasive_Computing.aspx',
title: 'Pervasive Computing',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Green_Computing.aspx',
title: 'Green Computing',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Artificial.aspx',
title: 'Artificial Intelligence',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Corba.aspx',
title: 'Corba',
image: ‘default’,
},
{
url: 'http://cshub.somee.com/Nuro.aspx',
title: 'Nuro SKy Mind Set',
image: ‘default’,
},
{
url: 'http://picmaniac.brinkster.net/',
title: 'PicManiac',
image: ‘default’,
},
{
url: 'jaiswalabhishek.blogspot.in',
title: 'Google Says',
image: ‘default’,
}
];
}
Search Box | Output
![Output]()