Post
Ask Question

AngularJS Search Box Using Filter

Introduction

Hi all, I hope you are fine . If you are new to angular JS I suggest you to read the Basics of AngularJS.

Now with the belief that you have read my previous article, we are starting.

Using the code

We will explain that with a demo. Please see the below implementation.
  1. <body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">  
  2.     <div>  
  3.         <input type="text" ng-model="curPlace" class="inputText">  
  4.         <ul>  
  5.             <li ng-repeat="place in placesVisited | filter:curPlace">  
  6.                 <a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>  
  7.             </li>  
  8.         </ul>  
  9.     </div>  
  10.     <script src="angular.min.js"></script>  
  11. </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.
  1. 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.
  1. <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 than this. Angular JS makes a searching functionality much easier right ?

Include CSS if you need 
  1. <style>    
  2.         .inputText {    
  3.             border: 1px solid #ccc;    
  4.             border-radius: 10px;    
  5.             background-color: #0ff;    
  6.             box-shadow: 1px 1px 1px 1px #ccc;    
  7.             width: 230px;    
  8.             height: 30px;    
  9.         }    
  10.     
  11.         ul {    
  12.             list-style: none;    
  13.             padding: 10px;    
  14.             background-color: #CAEAF5;    
  15.             border-radius: 10px;    
  16.             border: 1px solid #ccc;    
  17.             width: 210px;    
  18.         }    
  19.     
  20.         li {    
  21.             border: 1px solid #ccc;    
  22.             border-right: none;    
  23.             border-left: none;    
  24.             padding: 2px;    
  25.             text-align: center;    
  26.         }           
  27. </style>    
Complete HTML
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Angular animated search box - SibeeshPassion </title>  
  5.     <style>  
  6.         .inputText {  
  7.             border: 1px solid #ccc;  
  8.             border-radius: 10px;  
  9.             background-color: #0ff;  
  10.             box-shadow: 1px 1px 1px 1px #ccc;  
  11.             width: 230px;  
  12.             height: 30px;  
  13.         }  
  14.   
  15.         ul {  
  16.             list-style: none;  
  17.             padding: 10px;  
  18.             background-color: #CAEAF5;  
  19.             border-radius: 10px;  
  20.             border: 1px solid #ccc;  
  21.             width: 210px;  
  22.         }  
  23.   
  24.         li {  
  25.             border: 1px solid #ccc;  
  26.             border-right: none;  
  27.             border-left: none;  
  28.             padding: 2px;  
  29.             text-align: center;  
  30.         }         
  31.     </style>  
  32. </head>  
  33. <body ng-app ng-init="placesVisited=['Delhi','Kerala','Tamil Nadu','Banglore','Uttar Pradesh','Noida','Haryana','Thrissur'];">  
  34.     <div>  
  35.         <input type="text" ng-model="curPlace" class="inputText">  
  36.         <ul>  
  37.             <li  ng-repeat="place in placesVisited | filter:curPlace">  
  38.                 <a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>  
  39.             </li>  
  40.         </ul>  
  41.     </div>  
  42.     <script src="angular.min.js"></script>  
  43. </body>  
  44. </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. Kindest Regards

Sibeesh Venu 
Next Recommended Reading Sorting, Paging And Filter Grid Using AngularJS