CHunky Universe of Vigourous Astonishing SHarepoint :)

angular jQuery UI autocomplete

Angular JS is one of the most developed MVC frameworks in the javascript world. Angular UI is a huge UI-centric extension of AngularJS (it is more or less like jQuery UI to the jQuery). It uses much jQuery UI and Twitter Bootstrap and provides many own components like modal dialogs, maps, tooltips, masked inputs and much more. And all this is easy to implement in your code just by adding a directive:

<input ui-date>

Much cleaner than listening on $(document).ready, traversing the DOM and appending the datepicker in your code:

<input id="myDate">


$(document).ready(function() {
   var input = $("#myDate");

All this code is invoked but outside your app code.


Unfortunately Angular UI has no official autocomplete directive. There is a discussion about it on many forums. There are some working implementations. But they are not complete. I looked at how ui-date is implemented. jQuery UI Datepicker and jQuery UI Autocomplete have one in common. They are relying on a set of options. To create a directive for each option would make the html code too dirty. Here is a directive ui-autocomplete which I have written that (like ui-date) takes a options object as parameters. This options object has to be appended to the $scope variable in the angular controller:

var uiAutocomplete = function() {
	return {
		require: '?ngModel',
		link: function(scope, element, attrs, controller) {
			var getOptions = function() {
				return angular.extend({}, scope.$eval(attrs.uiAutocomplete));
			var initAutocompleteWidget = function () {
				var opts = getOptions();
				if (opts._renderItem) {"autocomplete")._renderItem = opts._renderItem;
			// Watch for changes to the directives options
			scope.$watch(getOptions, initAutocompleteWidget, true);
angular.module('ui.directives').directive('uiAutocomplete', [uiAutocomplete]);

Example code

<div ng-controller="AutoCompleteCtrl" class="ui-widget">
    <input placeholder="Search..." ng-model="term" ui-autocomplete="autocompleteOptions"/>

Here is the angular controller:

function AutoCompleteCtrl($scope, $http) {
	var search = function(request, response) {
			var callback = function(data) {
			$http.get("/api/orders/search?q=" + $scope.term)

		gotoOrderDetails = function (id) {
			window.location = "/orders/" + id;

		_renderItem = function (ul, item) {
			return $("<li>")
				.data("item.autocomplete", item)
				.append("<a>" + item.title + "</a>")

		select = function (event, ui) {
			if (ui.item) {

	$scope.autocompleteOptions = {
		minLength: 1,
		source: search,
		select: select,
		delay: 500,
		_renderItem: _renderItem

To get the options inside the directive a function called $eval is used.

Here a standard set of jQuery UI Autocomplete is used and one more: _renderItem. It is not included in the default autocomplete options, but in my case I needed to define custom rendering logic for my items.


Edit 2013-02-15:

I have sent a pull request angular ui. See the details here

Edit 2013-02-23:

I have added support for uiConfig and change scope.$watch invokation based on Pull Request Feedback. I also published a small gist which shows how a simple ui-autocomplete can be used.

5 responses to “angular jQuery UI autocomplete

  1. Gabriel Svennerberg 2013-05-15 at 11:21

    I was trying out your code and didn’t get it to work at first. I got an error where you overwrite jQuery UI’s _renderItem method. The fix was easy though. Just replace the string “autocomplete” to “ui-autocomplete”. See code below."ui-autocomplete")._renderItem = opts._renderItem;

  2. Cem Çapulkolig 2013-06-27 at 21:33“autocomplete”) ===> needs to be changed to“ui-autocomplete”) for this to work in new Jquery UI

  3. Sergio Giusti 2016-03-16 at 14:51

    I am trying to create a lookup column in one list that lookups data from another list in the same site, the lookup list has around 4000 items and the dropdown that appears is terrible, can I use your solution to solve this on the newitem.aspx form? if so, could you provide some instructions please.

    Hi, I’m a complete idiot when it comes to this stuff, I have a list called ‘Staff List’, it has a column called ‘Employee ID’. I have a document library called ‘eFiling’, it has a Lookup column called ‘Employee ID’ which is set to lookup the employee id field from the staff list. If I add a script editor to the newitem form how do I format your code so that it will work?

  4. Pritesh 2017-06-04 at 08:12

    Getting “TypeError: element.autocomplete is not a function” error

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Daniel Chronlund Cloud Tech Blog

News, tips and thoughts for Microsoft cloud fans

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Architect, Speaker, Author

Microsoft 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Mai Omar Desouki

PFE @ Microsoft

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders


Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant


SharePoint for everyone


Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint


Mostly what I know and share about...

%d bloggers like this: