pombredanne / ui-autocomplete

AngularJS Autocomplete Wrapper for the jQuery UI Autocomplete Widget, intend to replace Select2!

ui-autocomplete directive v0.5.6

Intend to replace Select2!

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

Requirements

• (jQuery)
• (jQuery UI)
• (AngularJS)

Testing

Installation options

bower install ui-autocomplete

Usage

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

###Options

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
• onlySelect If true, element value must be selected from suggestion menu, otherwise the value will be set to ''
• 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,
            onlySelect: true,
            source: function (request, response) {
                var data = [
                        "Asp",
                        "BASIC",
                        "C",
                        "C++",
                        "Clojure",
                        "COBOL",
                        "ColdFusion",
                        "Erlang",
                        "Fortran",
                        "Groovy",
                        "Haskell",
                        "Java",
                        "JavaScript",
                        "Lisp",
                        "Perl",
                        "PHP",
                        "Python",
                        "Ruby",
                        "Scala",
                        "Scheme"
                ];
                data = $scope.myOption.methods.filter(data, request.term);

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

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

All official options Here.

###Methods

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:

$scope.myOption.methods.search('term');

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

$scope.myOption.methods.clean();

All official methods Here.

###Events

Autocomplete events will be emitted just like official events triggered.

You can bind events to initialize the autocomplete like this:

$scope.myOption.events = {
    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