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.
[js]
<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>
[/js]
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.
[js]
placesVisited=[‘Delhi’,’Kerala’,’Tamil Nadu’,’Banglore’,’Uttar Pradesh’,’Noida’,’Haryana’,’Thrissur’];
[/js]
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.
[js]
<a ng-href="https://www.google.co.in/webhp?q={{place}}">{{place}} </a>
[/js]
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
[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>
[/css]
Complete HTML
[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>
[/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
