Angularjs Autocomplete Example - Jquery

How to use angularjs autocomplete?

Snippet Code


  
Rate this page :
  [ 1 votes]

Angularjs autocomplete is a directive which is used to display the suggestion while typing the required keywords inside the text box. Sample code for angularjs autocomplete is given below.

<script src='http://code.jquery.com/jquery-1.9.1.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js'></script> <script src='https://code.angularjs.org/1.0.0/angular-1.0.0.js'></script> <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css'> <script> function DefaultCtrl($scope) { $scope.names = ["hscripts", "easycalculation", "shorttutorilas", "statsmonkey", "hioxindia", "bforball", "mycollege", "quotespick", "hibihi", "worlddomainstats", "newsreporter", "findheight"]; } angular.module('MyModule', []).directive('autoComplete', function($timeout) { return function(scope, iElement, iAttrs) { iElement.autocomplete({ source: scope[iAttrs.uiItems], select: function() { $timeout(function() { iElement.trigger('input'); }, 0); } }); }; }); </script> <div ng-app='MyModule' style='padding:10px;'> <div ng-controller='DefaultCtrl'> <input auto-complete ui-items="names" ng-model="selected"> <!-- selected = {{selected}}--> </div> </div> <style> ul{ left: 20px !important; top: 40px !important; width:177px !important; } </style>

Tags


Ask Questions

Ask Question