AngularJS Autocomplete Wrapper for the jQuery UI Autocomplete Widget, intend to replace Select2!
Switch branches/tags
Clone or download
Latest commit 00050fd Aug 23, 2017
Permalink
Failed to load latest commit information.
demo update demo Jan 14, 2015
.gitignore Create .gitignore May 24, 2013
LICENSE autocomplete May 24, 2013
README.md FIX for MD formatting Aug 23, 2017
autocomplete.js Fixed not updating model after empty value Jan 14, 2015
bower.json release v0.6.1 Jan 14, 2015

README.md

ui-autocomplete directive v0.6.1

Intend to replace Select2!

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

Requirements

Testing

Installation options

bower install ui-autocomplete --save

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
  • 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 = [
                        "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