Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular UI autocomplete example
var autocompleteApp = angular.module("autocompleteApp");
var autocompleteController = function($scope) {
//http://jqueryui.com/autocomplete/
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$scope.autocompleteOptions = {
source: availableTags
}
}
autocompleteApp.('ui.config', {
autocomplete: {
minLength: 2,
delay: 500
}
});
<!DOCTYPE html>
<html>
<head></head>
<body>
<div ng-app="autocompleteApp">
Autocomplete:
<br>
<div ng-controller="autocompleteController">
<input type="text" ui-autocomplete="autocompleteOptions">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script src="ui/angular-ui.min.js"></script>
<script src="app.js">
</script>
</body>
</html>
@abulte

This comment has been minimized.

Copy link

abulte commented Apr 15, 2013

Is this supposed to work? Because it doesn't on my project ;-) That's a shame because I find it very elegant!

@abulte

This comment has been minimized.

Copy link

abulte commented Apr 15, 2013

I found your blog post, I think I'll understand better now. http://chuvash.eu/2013/01/04/angular-jquery-ui-autocomplete/

@mirontoli

This comment has been minimized.

Copy link
Owner Author

mirontoli commented May 15, 2013

Sorry, I didn't see your comment. Good, that it is clearer now.

@tensiondriven

This comment has been minimized.

Copy link

tensiondriven commented Feb 9, 2014

Would it be sane to replace line 4 with a JQuery AJAX call to get a list of options from the server?

@xbenjii

This comment has been minimized.

Copy link

xbenjii commented May 6, 2014

Why would you do that? Just use the $http scope and create an http request.

@proganis

This comment has been minimized.

Copy link

proganis commented Feb 24, 2016

Does it work when I use array of object in lieu of array of string?If not, how to work?plz.... very helpful to me if it work on array of object

@jasp402

This comment has been minimized.

Copy link

jasp402 commented Jul 25, 2016

angular.min.js:17 Uncaught Error: No module: autocompleteApp

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.