jQuery-AutocomplejQuery 自动补全组件

Ajax Autocomplete for jQuery

jQuery 的自动补全组件，支持 Ajax 获取远程数据，支持数据分组显示。

除了 jQuery 之外没有其它依赖。

标准的 jquery.autocomplete.js 文件大小约为13KB。

API

• $(selector).autocomplete(options);

  • 为输入字段设置自动填充。

  • options: 定义要用于自动填充插件的设置的对象字面值。 下面列出了可用的选项设置。

用法

Html:

<input type="text" name="country" id="autocomplete"/>

Ajax lookup:

$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

Local lookup (no Ajax):

var countries = [
    { value: 'Andorra', data: 'AD' },
    // ...
    { value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

Custom lookup function:

$('#autocomplete').autocomplete({
    lookup: function (query, done) {
        // Do Ajax call or lookup locally, when done,
        // call the callback and pass your results:
        var result = {
            suggestions: [
                { "value": "United Arab Emirates", "data": "AE" },
                { "value": "United Kingdom",       "data": "UK" },
                { "value": "United States",        "data": "US" }
            ]
        };

        done(result);
    },
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});