作者:zccst(转)
JQuery UI 是以 JQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件,这些控件主要包括:Accordion,Autocomplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,其中Autocomplete能够非常容易的帮我们实现类似于百度搜索的智能提示功能。最新JQuery UI可以从JQuery UI官网下载获得。
一、首先了解下JQueryUI提供的重要属性:
1. autoFocus:当智能提示框出现时,是否自动选中第一项,默认为false,即不选中。
2. delay:在按键后执行搜索的延时,默认为300ms。
3. disabled:是否禁用自动完成功能,默认为false。
4. minLength:触发自动完成功能需要输入的最小字符数量。
5. source:即为指定智能提示下拉框中的数据来源,支持三种类型。
Array,主要用于本地化数据提供,支持两种格式:字符串数组 [ "Choice1", "Choice2" ]及标签和值属性的Json格式数组 [ { label: "Choice1", value: "value1" }, ... ]
String,用于ajax请求的远程地址链接,返回Array或Json格式字符串。
Function,回调函数,最具有灵活性的一种方式,可用于返回任何数据源方式来实现自动完成,其中包含两个参数request,response通过request.term 来获取用户输入的值,通过response(argument)来对获取的数据源进行显示。
二、JQuery UI还提供了一些有用的方法:
1. close():关闭智能提示选择框。
2. destroy():销毁智能提示选择框,将其所产生的元素完全删除,使其恢复至初始状态。
3. disable():禁用自动完成功能。
4. enable():开启自动完成功能。
三、主要事件包括:
1. change(event, ui):当值改变时发生,ui.item为选中的项。
2. close(event, ui):当智能提示框关闭时发生。
3. create(event, ui):当智能提示框创建时发生,可以在此事件中,对外观进行一些控制。
4. focus(event, ui):当智能提示列表任意一项获得焦点时发生,ui.item为获得焦点的项。
5. open(event, ui):当智能提示框打开或更新时发生。
6. response(event,ui):在搜索完成后智能提示框显示前发生,可以在此事件中对显示项进行处理。
7. search(event, ui): 在开始请求之前发生,可以在此事件中返回false来取消请求。
8. select(event, ui):当智能提示框中任意一项被选中时发生,ui.item为选中的项。
常用有ui.item.id,ui.item.value和ui.item.label
四、一些个人积累
1,选中后清空
select:function(){
//处理
ui.item.value = '';
}
分享到:
相关推荐
JQuery UI之Autocomplete使用详解
jQuery UI Autocomplete是jQuery UI的自动完成组件演示代码
主要介绍了jquery UI实现autocomplete在获取焦点时得到显示列表功能,结合实例形式分析了jquery UI实现autocomplete事件响应及显示下拉列表功能操作技巧,需要的朋友可以参考下
jquery.autocomplete.js 、jquery.autocomplete.css
在java和net下实现Autocomplete的前台JS和后台controller代码
做界面效果非常好的jquery工具,在jquery上下载的源码,直接能用
NULL 博文链接:https://zyssnh.iteye.com/blog/2029229
根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。 如需了解更多有关 autocomplete 部件的细节,请查看 API 文档 自动完成部件(Autocomplete Widget)。
NULL 博文链接:https://tanchang7.iteye.com/blog/2338188
jQuery UI Autocomplete 1.8.16 中文输入修正代码,使用jQuery UI Autocomplete的朋友可以参考下
NULL 博文链接:https://xwhoyeah.iteye.com/blog/2009525
jquery ui autocomplete实现自动填充
介绍 在 jQuery UI 的最近更新中增加了自动... jQuery UI 的下载地址:http://jqueryui.com/download 一.基本配置 一般来说,引用独立的脚本可以减小页面的尺寸,我们这里使用独立的脚本。对于 autocomplete 来说,涉及
在写一个输入框提示内容的功能时,找到了jQuery autocomplete自动补齐这个插件,如获至宝,但是从网上下载后自己用起来总是出问题,原来他只匹配jQuery1.7以下的版本,但是我的其他插件要用jQuery3的版本,这时候就...
jquery的一个autocomplete插件 不是ui里的那个,简单实用。
主要是一些界面的扩展,包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等,新版本的UI将包含更多的微件。 效果库 用于提供丰富的动画效果,让动画不再...
支持的数据源 jQuery UI Autocomplete主要支持字符串Array、JSON两种数据格式。 普通的Array格式没有什么特殊的,如下: 代码如下: [“cnblogs”,”博客园”,”囧月”] 对于JSON格式的Array,则要求有:label、value...
jQueryUI-autocomplete-bootstrap 带有ID字段更新的 Bootstrap 3 的 jQuery-UI 自动完成设置。 可以在找到正在运行的演示