Search Engine in Angular JavaScript

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

Up Next
    Ebook Download
    View all
    Learn
    View all