jQuery 自动补全组件 jQuery-Autocomple

MIT
JavaScript
跨平台
2017-01-17
李三石

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);
    }
});
加载中

评论(1)

推荐方案
推荐方案
实现一个智能提示功能需要ajax、数据库、jsp/php、算法等很多知识, 如果数据量大,还需要特殊优化 一个小功能,花费太大精力很不划算 我使用了92find.c-o-m的搜索框智能提示功能托管服务, 只要一行javascript代码就可以实现百度、淘宝搜索框提示的全部功能 比如:汉字拼音匹配、拼音前缀匹配、模糊搜索、智能容错,还可以自定义提示词汇及其排序权重 花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能 同时兼容IE、Firefox、Safari、Chrome、Opera

暂无资讯

暂无问答

【转】240多个jQuery插件

参考文档:http://www.cnblogs.com/terrylee/articles/988623.html 文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an in...

2013/05/28 15:55
175
1
[JavaScript]240个jQuery实现AJAX插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 00:12
61
0
强烈推荐:240多个jQuery插件

概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼...

2013/05/15 11:53
225
0
【转】75种常用的jquery网页特效

参考文档:http://www.oschina.net/code/snippet_187746_9846 1、jquery图片特效(14种 ) (1)、jquery cycle 循环插件多功能幻灯片插件支持多种幻灯片特效 (2)、jquery flow 图片切换滚...

2013/05/28 15:28
876
0
DOM对象与JQuery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

2014/09/13 16:19
21
0
js:滚动页面时自动激活对应菜单中的条目

这个在[Change Active Menu Item on Page Scroll?](http://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll)有详细的讨论。对应的代码在[http://jsfiddle.net/...

2015/11/20 15:18
101
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

2018/11/04 19:51
67
0
dom对象和jQuery对象的区别

dom对象和jQuery对象的区别

2014/07/30 22:07
105
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部