AngularJS Search Box Using Filter

Sibeesh Passion

Rate me:

4.55/5 (7 votes)

16 Jun 2015CPOL1 min read

39.2K

AngularJS Search box using filter

Introduction

If you are new to Angular JS, I suggest you read the Basics of AngularJS.

Now with the belief that you have read my previous article, let's begin.

Using the Code

We will explain that with a demo. Please see the below implementation.

JavaScript

<body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu',
                                     'Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">  
    <div>  
        <input type="text" ng-model="curPlace" class="inputText">  
        <ul>  
            <li ng-repeat="place in placesVisited | filter:curPlace">  
                <a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>  
            </li>  
        </ul>  
    </div>  
    <script src="angular.min.js"></script>  
</body>

In this, as we discussed with the previous article, I have declared my ng-app and ng-init. In the initialization part, I have given the place names I have visited.

JavaScript

placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];

I have declared my model with the name curPlace and after we are binding the initialized array elements to the li tag using ng-repeat directive. I have set the href as follows to make it meaningful, so that if you click a place name, it will redirect to the Google search.

JavaScript

<a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>

Here, the process is whenever you type any character in the model curPlace, the filter will be triggered and it will bind the appropriate result to the li. For a basic implementation, you do not need to do anything other than this. Angular JS makes a searching functionality much easier, right?

Include CSS If You Need

CSS

<style>    
        .inputText {    
            border: 1px solid #ccc;    
            border-radius: 10px;    
            background-color: #0ff;    
            box-shadow: 1px 1px 1px 1px #ccc;    
            width: 230px;    
            height: 30px;    
        }    
    
        ul {    
            list-style: none;    
            padding: 10px;    
            background-color: #CAEAF5;    
            border-radius: 10px;    
            border: 1px solid #ccc;    
            width: 210px;    
        }    
    
        li {    
            border: 1px solid #ccc;    
            border-right: none;    
            border-left: none;    
            padding: 2px;    
            text-align: center;    
        }           
</style>

Complete HTML

XML

<!DOCTYPE html>  
<html>  
<head>  
    <title>Angular animated search box - SibeeshPassion </title>  
    <style>  
        .inputText {  
            border: 1px solid #ccc;  
            border-radius: 10px;  
            background-color: #0ff;  
            box-shadow: 1px 1px 1px 1px #ccc;  
            width: 230px;  
            height: 30px;  
        }  
  
        ul {  
            list-style: none;  
            padding: 10px;  
            background-color: #CAEAF5;  
            border-radius: 10px;  
            border: 1px solid #ccc;  
            width: 210px;  
        }  
  
        li {  
            border: 1px solid #ccc;  
            border-right: none;  
            border-left: none;  
            padding: 2px;  
            text-align: center;  
        }         
    </style>  
</head>  
<body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu',
                                     'Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">  
    <div>  
        <input type="text" ng-model="curPlace" class="inputText">  
        <ul>  
            <li  ng-repeat="place in placesVisited | filter:curPlace">  
                <a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>  
            </li>  
        </ul>  
    </div>  
    <script src="angular.min.js"></script>  
</body>  
</html>

Output

Conclusion

Now that is all for the day. I will come with another set of items in Angular JS soon? I hope you liked this article. Please give your valuable suggestions.

This article was originally posted at http://sibeeshpassion.com/angularjs-search-box-using-filter

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Sibeesh Passion

Software Developer

Germany

I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu