Angular

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 
Membership not found