Angularjs Autocomplete Example - Jquery
How to use angularjs autocomplete?
Snippet Code
Rate this page :
|
[ 0 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>
