jQuery-Autocomple 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
jQuery-Autocomple 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
jQuery-Autocomple 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
jQuery-Autocomple 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
jQuery-Autocomple 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

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)

加载中
更多评论
暂无内容
发表了博客
01/16 10:30

啥是jQuery(什么是jQuery)

一、什么是jQuery jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少,做的多"的JavaScript库。 jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX 二、1.x、2.x、3.x 三大系列的区别 下载jquery : https://www.bootcdn.cn/jquer...

0
0
发表了博客
2018/03/26 16:45

jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别

$(function(){})已经是一个匿名函数了,在里面定义的函数已经是私有了,不能全局访问。把函数定义在全局,也就是function外面,这样外部才能调用。 Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成...

0
0
发表于大前端专区
2014/01/17 16:13

JQuery - $, JQuery, Window.load, JQuery.ready

开篇之前偶然间看到和这篇文章有关的Stackoverflow的一个thread,在这里摘录。 $(document).ready(function() { // executes when HTML-Document is loaded and DOM is ready alert("document is ready"); }); $(window).load(function() { // executes when complete page is fully loaded, including all frames, ...

0
0
发表了博客
2018/06/21 03:16

jquery-3 jquery选择器

jquery-3 jquery选择器 一、总结 一句话总结:选择器使用的时候可以结合参考手册,里面都已经详细归类好了。(多用才能熟啊) 1、$(:input).css({'color':'#987654'}); 中的css方法中的参数是什么数据格式? 是json数据格式,也就是jquery中的参数采用的是json数据格式 2、jquery中的参数采用的是什么数据格式? json数据...

0
0
发表了博客
2018/03/14 00:12

You-Dont-Need-JQuery (你不需要JQuery)

看完这篇文章我才觉得真的要用JQuery ,因为实在是有些地方设计的使用太复杂了, document.querySelector() 和 Document.querySelectorAll 的确是很方便的API... 不过很多功能还是用JQuery实现起来比较简单。 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等...

0
1
发表了博客
2018/02/24 20:28

jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别及用法

假如你现在还在为自己的技术担忧,假如你现在想提升自己的工资,假如你想在职场上获得更多的话语权,假如你想顺利的度过35岁这个魔咒,假如你想体验BAT的工作环境,那么现在请我们一起开启提升技术之旅吧,详情请点击http://106.12.206.16:8080/qingruihappy/index.html query是优秀的Javascrīpt框架。我们现在来讨论下...

0
0
发表了博客
2011/03/28 08:41

jQuery jquery-1.5.1.min.js使用

请问下 jquery-1.5.1.min.js 导入MyEclipse9.0有错误提示 是怎么回事

0
1
发表了博客
2019/03/01 16:07

JQuery

目录 JQuery JQuery选择器 JQuery事件 JQuery对DOM元素的操作 JQuery jQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处...

0
0
发表了博客
2019/03/03 01:28

jQuery

jQuery jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。 jQuery的特点 链式编程:比如.show()和.html()可以连写成.show().html()。 隐式迭代:隐式 对应的是 显式。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进...

0
0
发表于大前端专区
2014/11/16 11:14

JQuery

JQuery特点、优缺点及其常用操作。

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
1 评论
11 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部