jQuery-ui-autocomplete

jQuery UI Autocomplete是jQuery UI的自动完成组件，支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function等方式来获取数据。

Array数组的简单例子：

    <script type="text/javascript" src="jquery-1.10.2.js"></script><script src="jquery.ui.core.js"></script><script src="jquery.ui.widget.js"></script><script src="jquery.ui.position.js"></script><script src="jquery.ui.autocomplete.js"></script><script type="text/javascript">$(function(){var projects = ["JQuery","JavaScript","HTML","PHP","JS"];$("#tags").autocomplete({source : projects,});})</script>
</head>
<body><div class="box"><label for="tags">输入：</label><input id="tags"></div>
</body>
</html>

普通数组是没有特殊要求的，可是JSON则要求有label，value这个两个属性

var projects = [{value: "这是jquery",label: "JQuery",desc: "NO",icon: "jquery_32x32.png"},{value: "这是javascript",label: "JavaScript",desc: "Yes",icon: "javascript_32x32.png"},{value: "这是PHP",label: "PHP",desc: "Yes && NO",icon: "php_32x32.png"}];$("#tags").autocomplete({minLength : 0,source : projects,focus : function(event, ui){$("#tags").val(ui.item.label);return false;},select : function (event, ui){$("#tags").val(ui.item.label);$("#tags-description").html(ui.item.desc);$("#tags-icon").attr("src", "images/" + ui.item.icon);return false;}});<div class="box"><label for="tags">输入</label><input id="tags"><div id="tags-description"></div><div id="tags-icon"></div>
</div>

上图就是点击选中后对其他标签的修改

在autocompelte中可以通过ui参数去调用json中的键值，同时也能对外部标签（是指#tags绑定autocomplete以外的标签）进行修改

autocomplete常用参数：

source：可以是array、function，也可以是请求地址，就是string

minLength：字符达到minLength时就激活Autocomplete

autoFocus：当autocomplete弹出时，自动选择第一个

delay：延迟多少秒后激活Autocokplete

常用的监听事件：

1.create(event, ui)：Autocomplete创建时，可以在此事件中，对外观进行一些控制

2.search(event, ui)：在开始请求之前，可以在此事件中返回false来取消请求

3.open(event, ui)：Autocomplete的结果列表弹出时

4.focus(event, ui)：Autocomplete的结果列表任意一项获得焦点时，ui.item为获得焦点的项

5.select(event, ui)：Autocomplete的结果列表任意一项选中时，ui.item为选中的项

6.close(event, ui)：Autocomplete的结果列表关闭时

7.change(event, ui)：当值改变时，ui.item为选中的项

Focus 事件

　　选项中移动的时候，被指向的选项得到焦点，但是还没有被选中的时候，将会触发这个事件

Select 事件

　　当一个项目被选中的时候，将会触发这个事件，默认的处理是使用这个值替换掉输入框中的内容

自定义的显示格式，通过_renderItem方法，自定义提示的显示方式

以下就是autocomplete通过ajax将后台数据获取，最终显示在页面的案列

上面autocomplete的source属性设置是function的函数，function有两个函数：request和response。

request是一个对象，只有一个属性term，它代表输入框的值

response是一个回调函数，只有一个参数，就是后台返回的数据

select函数有默认函数，如果不return false的话，那么默认的函数也会执行

Jquery ui autocomplete的官方手册https://api.jqueryui.com/autocomplete/

转载于:https://www.cnblogs.com/kevindon002/p/4949051.html

jQuery-ui-autocomplete相关推荐

JQuery UI AutoComplete 与 Strtus2 结合使用
这篇文章中完成一个搜索城市的示例程序,输入城市名称或者拼音首字母,返回城市的智能提示.使用了JQuery UI AutoComplete插件. 首先,看一下效果图,了解程序完成后是一个什么样子. 汉字 ...
jQuery UI Autocomplete是jQuery UI的自动完成组件
jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大.最灵活的Autocomplete,它支持本地的Array/JSON数组.通过ajax请求的Array/ ...
jQuery UI Autocomplete示例（一）
今天看到这么个教程,分享给新手学习 AutoComplete 在获取焦点后,随着用户键入的内容,可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择. 这可以用作之前输入过的内容也可以用作 ...
Jquery Ui AutoComplete自动填写的功能
用到的jquery 和jquery ui 的版本如下: jQuery v1.12.4 jQuery UI - v1.11.0 有部分版本会有一些这样那样的问题,具体原因未深究. jquery 的代码如 ...
jquery ui autocomplete输入中文不自动完成的问题
因为输入法或浏览器的问题,在输入中文后并没有触发自动完成,要再按多一下键盘才触发,查看发现它是用keydown来实现 .bind("keydown.autocomplete", f ...
jQuery的Autocomplete插件
Autocomplete插件根据用户输入值进行搜索和过滤让用户快速找到并从预设值列表中选择通过给Autocomplete字段焦点,或者在其中输入字符,插件开始搜索匹配的条目并且,显示供选择的值 ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
html jquery 不能自动完成,不能设置属性apos；_renderitem apos；定义jQuery UI自动完成HTML...
Carl Weis提出了一个问题:Cannot set property '_renderItem' of undefined jQuery UI autocomplete with HTML,或许与 ...
结合Jqery UI autocomplete实现featurelayer关键词的查询与展示
概述: 本文讲述结合Jquery UI autocomplete实现在文本框中输入关键字,查询featurelayer并将结果以列表的形式展示出来,点击某一列表在地图中展示相对应的效果. 效果: 实现 ...
调用百度请求边输入边提示 jQuery UI 自动完成（Autocomplete）支持中文超简单
index.html <!doctype html> <html lang="en"> <head><meta charset=" ...

jQuery-ui-autocomplete

jQuery-ui-autocomplete相关推荐

最新文章

热门文章