微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery-Autocomple jQuery 自动补全组件

程序名称:jQuery-Autocomple

授权协议: MIT

操作系统: 跨平台

开发语言: JavaScript

jQuery-Autocomple 介绍

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);
    }
});

jQuery-Autocomple 官网

https://www.devbridge.com/sourcery/components/jquery-autocomplete/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐