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. }
  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. }
  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. }
  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. }
  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
Sibeesh Passion