AngularJS Autocomplete Wrapper for the jQuery UI Autocomplete Widget, intend to replace Select2!
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

ui-autocomplete directive v0.6.1

Intend to replace Select2!

AngularJS Autocomplete Wrapper for the jQuery UI Autocomplete Widget - v1.11.2



Installation options

bower install ui-autocomplete --save


Load the script files in your application like this:

<script type="text/javascript" src="javascript/jquery/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/angular/angular.js"></script>
<script type="text/javascript" src="javascript/angular-ui/autocomplete.js"></script>

Add the autocomplete module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.autocomplete'])

Apply the directive to your input elements:

<input type="text" ng-model="modelObj" ui-autocomplete="myOption">

ui-autocomplete option


All the options must be passed through the directive. There have added 5 options besides official options:

  • html If true, you can use html string or DOM object in sourceData.label
  • focusOpen If true, the suggestion menu auto open with all source data when element focus
  • onlySelectValid If true, element value must be selected from suggestion menu, otherwise set validity of 'onlyselect' to false
  • groupLabel html string or DOM object, it is used to group suggestion result, it can't be seleted
  • outHeight number, it is used to adjust suggestion menu' css style "max-height", and you would set css "overflow-y", see demo.

You can config options like this:

myAppModule.controller('MyController', function ($scope, $compile) {
    /* config object */
    $scope.myOption = {
        options: {
            html: true,
            focusOpen: true,
            onlySelectValid: true,
            source: function (request, response) {
                var data = [
                data = $scope.myOption.methods.filter(data, request.term);

                if (!data.length) {
                        label: 'not found',
                        value: ''
                // add "Add Language" button to autocomplete menu bottom
                    label: $compile('<a class="btn btn-link ui-menu-add" ng-click="addLanguage()">Add Language</a>')($scope),
                    value: ''
        methods: {}

// in html template
<input type="text" ng-model="modelObj" ui-autocomplete="myOption">

All official options Here.


Autocomplete methods will be added to $scope.myOption.methods after Autocomplete initialized. There also have added 2 methods:

  • filter filter html labels besides official methods
  • clean use to empty ngModal object

You can invoke methods like this:


data = $scope.myOption.methods.filter(data, request.term);


All official methods Here.


Autocomplete events will be emitted just like official events triggered.

You can bind events to initialize the autocomplete like this:

$ = {
    change: function( event, ui ) {
        // do something
    close: function( event, ui ) {
        // do something
    //...other event handlers

All official events Here.

Working with ng-model

The ui-autocomplete directive plays nicely with ng-model.

Not only primitive type ngModel, you can also use object type ngModel! There must have a property 'value' in object type ngModel.

A object type ngModel like this:

modelObj = {
    id: 'ae15581f-d8e1-48e8-9d6d-b5989ae77ce5',
    name: 'JavaScript',
    value: 'JavaScript',
    // some other property

Documentation for the autocomplete

The autocomplete works alongside of all the documentation represented here