jquery自动补全插件autocomplete.js

所属分类:输入-自动完成

 11485  38  查看评论 (11)
jquery自动补全插件autocomplete.js ie兼容6

autocomplete.js使用方法

Html:

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

Ajax 查找

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

本地查找 (没有 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);
    }
});

自定义查找函数

$('#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);
    }
});
相关插件-自动完成

js敲击空格分割tag标签

每敲击一次空格,就会把输入的值变成一个tag标签
  自动完成
 11292  47

jQuery实现仿搜索引擎文本框自动补全插件

jQuery实现仿搜索引擎文本框自动补全插件
  自动完成
 10965  85

jQuery多值输入插件 jQuery Manifest

Manifest是一个可以为多值输入增加更多惊喜的插件。Email地址中的多个收件人字段是一个非常好的例子,你可以只简单提供一般文本输入,要求用户使用分号手工分开每一个收件人。 但是移除收件人是一个费劲的事情,但是使用这个插件,你知道用户会非常高兴这种用户操作体验的。
  自动完成
 15648  26

jQuery国际电话区号选择插件intlTelInput.js

国际电话区号选择器插件intlTelInput.js,将标准输入转换为具有国旗下拉列表的国际电话输入。当点击下拉列表时,它会列出旗帜旁边的所有国家和国际拨号代码。非常适合您的网站的国际访客。
  自动完成
 5311  28

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    小灰 0
    2017/11/20 21:17:04

    只能选 data中的内容怎么设置

    回复
    shau 0
    2017/11/1 16:39:24

    有个BUG求解决,

    第一次查询,点击选中以后,鼠标再点进输入框,会一直触发onselect事件 怎么解决

    回复
    HenryMrZ 0
    2017/10/16 16:50:06

    垃圾文件太多,而且ajax的data是固定一次的,想要获取input输入值当做data传送很难实现

    回复
    zhao7826193 0
    2017/10/9 17:35:37

    我直接报错autocomplete不是一个function

    回复
    猫熊。 0
    2017/9/12 11:47:53

    Uncaught TypeError: Cannot read property 'length' of undefined 这个问题 是因为返回的json格式不对

    {
        query: "Unit",
        suggestions: [
            { value: "United Arab Emirates", data: "AE" },
            { value: "United Kingdom",       data: "UK" },
            { value: "United States",        data: "US" }
        ]
    }

    必须是这种格式

    回复
    长月孤舟三人影 0
    2017/6/5 17:12:11

    同一个页面只可以绑定一个输入框吗 我绑定了三个输入框 但是只有最后一个生效了。。。

    回复
    翔宇 0
    2017/5/23 11:39:06

    ajax请求服务器怎么

        翔宇0
        2017/5/23 11:40:23

        报这个错误Uncaught TypeError: Cannot read property 'length' of undefined

        木槿丶0
        2017/8/30 11:05:42

        我也是报这个错

    回复
    chai0803 0
    2017/3/27 11:20:44
    挺不错,也可以支持中文。就是下载的这个文件夹里面分的文件夹太多了,有点乱。而且插件指向的这个website地址好像跟这个不是同一个插件吧? 回复
    SiriBen 0
    2017/3/15 16:48:22
取消回复