CHUVASH.eu

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");
   input.datepicker();
});

All this code is invoked but outside your app code.

ui-autocomplete

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();
				element.autocomplete(opts);
				if (opts._renderItem) {
					element.data("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"/>
</div>

Here is the angular controller:

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

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

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

		select = function (event, ui) {
			if (ui.item) {
				gotoOrderDetails(ui.item.orderId);
			}
		};

	$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.

Enjoy

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.