{"id":7603,"date":"2012-09-16T20:51:34","date_gmt":"2012-09-16T15:21:34","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=7603"},"modified":"2017-08-03T14:08:20","modified_gmt":"2017-08-03T08:38:20","slug":"angularjs-text-suggestions","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angularjs-text-suggestions\/","title":{"rendered":"AngularJS : Text Suggestions"},"content":{"rendered":"

Let’s implement text suggestions functionality using AngularJS<\/a>. 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.<\/p>\n

[html]
\n&lt;!Doctype html&gt;
\n&lt;html ng-app&gt;
\n&lt;head&gt;
\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.0.1\/angular.min.js&quot;&gt;&lt;\/script&gt;
\n&lt;script type=&quot;text\/javascript&quot; src=&quot;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;
\n&lt;script type=&quot;text\/javascript&quot;&gt;
\n\tfunction FruitsController($scope){
\n\t\t$scope.fruits=[‘apple’,’mango’,’banana’,’strawberry’,’pineapple’,’pina colada’,’raspberry’,’cherry’,’peach’,’pear’,’apricot’];
\n\t\t$scope.toggleGuess=function(){
\n\t\t\tif($scope.query==”) $(‘p’).hide();
\n\t\t\telse $(‘p’).show();
\n\t\t}
\n\t}
\n&lt;\/script&gt;
\n&lt;style type=&quot;text\/css&quot;&gt;
\n\tp{background-color: #ff0; width:10%; padding:5px; margin:1px; display:none;}
\n&lt;\/style&gt;
\n&lt;\/head&gt;
\n&lt;body&gt;
\n&lt;div ng-controller=&quot;FruitsController&quot;&gt;
\n\tStart typing the Fruit name to get possible guesses :&lt;br \/&gt;
\n\t&lt;input type=&quot;text&quot; ng-model=&quot;query&quot; ng-change=&quot;toggleGuess();&quot;&gt;
\n\t&lt;p ng-repeat=&quot;fruit in fruits | filter:query&quot;&gt;{{fruit}}&lt;\/p&gt;<\/p>\n

&lt;\/div&gt;
\n&lt;\/body&gt;
\n&lt;\/html&gt;
\n[\/html]<\/p>\n

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.<\/p>\n

The text box is bound to a variable ‘query’, which means whatever user types in the textbox, is contained in the query variable.<\/p>\n

[html]&lt;p ng-repeat=&quot;fruit in fruits&gt;[\/html]<\/p>\n

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.<\/p>\n

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.<\/p>\n

Have Fun \ud83d\ude42<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n