AngularJS : Text Suggestions
Let’s implement text suggestions functionality using AngularJS. It provides suggestions while we type into the text field. For example, if we have a list of fruits and the user types ‘ap’, it will show all fruit names that contain these letters.
[html]
<!Doctype html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
function FruitsController($scope){
$scope.fruits=[‘apple’,’mango’,’banana’,’strawberry’,’pineapple’,’pina colada’,’raspberry’,’cherry’,’peach’,’pear’,’apricot’];
$scope.toggleGuess=function(){
if($scope.query==”) $(‘p’).hide();
else $(‘p’).show();
}
}
</script>
<style type="text/css">
p{background-color: #ff0; width:10%; padding:5px; margin:1px; display:none;}
</style>
</head>
<body>
<div ng-controller="FruitsController">
Start typing the Fruit name to get possible guesses :<br />
<input type="text" ng-model="query" ng-change="toggleGuess();">
<p ng-repeat="fruit in fruits | filter:query">{{fruit}}</p>
</div>
</body>
</html>
[/html]
I have also included and used jquery library in this code. Inside FruitsController, we initialized a list of fruits, which is used to show fruit names on the page using ng-repeat in line 23. Initially, we hide this list using css, so that user can see suggestions only after they start typing into the text box.
The text box is bound to a variable ‘query’, which means whatever user types in the textbox, is contained in the query variable.
[html]<p ng-repeat="fruit in fruits>[/html]
will display a list of all fruits. We are passing its output to filter function. The filter function uses the query value to create a new array that contains only those records that match the query.
Whenever user types something into the textbox, the change event is fired and we bind it to a function toggleGuess using ng-change directive of AngularJS. toggleGuess function uses jquery to check if user has typed something into the textbox and if it is so, it displays the list of fruits that matches the query. If textbox goes empty, it hides the list of fruits.
Have Fun 🙂
Read Further on AngularJS Series
- AngularJS : A “Write Less Do More” JavaScript Framework
- AngularJS : Updating a Label Dynamically with User Input
- AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
- AngularJS : Text Suggestions
- AngularJS : Sorting objects on various attributes
- AngularJS : Fetching data from the server
- AngularJS : Multiple Views, Layout Template and Routing
- AngularJS : Implementing Routes And Multiple Views
- Building Intuitive Frontend Interfaces with AngularJS
As you may already know,
You can without using jquery
<!Doctype html><html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
<script type="text/javascript">
function FruitsController($scope, $http) {
$scope.fruits = ['apple', 'mango', 'banana', 'strawberry', 'pineapple', 'pina colada', 'raspberry', 'cherry', 'peach', 'pear', 'apricot'];
}
</script>
<style type="text/css">
p
{
background-color: #ff0;
width: 10%;
padding: 5px;
margin: 1px;
}
</style>
</head>
<body>
<div ng-controller="FruitsController">
Start typing the Fruit name to get possible guesses :<br />
<input type="text" ng-model="query">
<div ng-show="query">
<p ng-repeat="fruit in fruits | filter:query">{{fruit}}</p>
</div>
</div>
</body>
</html>
Just what I was looking for. Thank you.
Hi, thanks for the example. Really help me to understand how to build dynamic list using angularjs. Also it turn out that you don’t need to use jquery just to show/hide the result. ng-show directive can do that. Here’s the modified example:-
LOL are u looking at the map upside down maybe?
Também queria saber quem é a banda que canta essa música.
Why we are Superior and Rule the World!. . We have the world’s biggest Economy at $ 15 Trillion, 2 times bigger than China and nearly $ 5 trillion more than its next competitor Eurozone. . We have the world’s biggest in nearly every field, who leads in innovation and technology. American GE and American IBM have more patents and technoloy licences than all Chinese companies combined!. . US Dollar is the world’s reserve currency, accounting for 65% !. . We are simply destined to Rule the World! Tee hee
How long does it take for payment to clear in Google checkout?
Perhaps you upload this to the wrong site lol Really… -_-