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.
- <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.
- 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.
- <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
- <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
- <!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. Kindest Regards
Sibeesh Venu