AngularJS : Text Suggestions

16 / Sep / 2012 by raj 8 comments

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.

<!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>

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.

<p ng-repeat="fruit in fruits>

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

FOUND THIS USEFUL? SHARE IT

comments (8)

  1. redone

    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>

    Reply
  2. belajar-js

    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:-

    Reply
  3. Frascone

    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

    Reply

Leave a comment -