详解jQueryUI库中文本输入自动补全功能的用法_jquery

来源：动视网责编：小采时间：2020-11-27 20:53:44

详解jQueryUI库中文本输入自动补全功能的用法_jquery

详解jQueryUI库中文本输入自动补全功能的用法_jquery:自动补全（autocomplete），是一个可以减少用户输入完整信息的UI 工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.co

推荐度：

点击下载本文 文档为doc格式

导读详解jQueryUI库中文本输入自动补全功能的用法_jquery:自动补全（autocomplete），是一个可以减少用户输入完整信息的UI 工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.co

自动补全（autocomplete），是一个可以减少用户输入完整信息的UI 工具。一般在
输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。

一．调用autocomplete()方法

二．修改autocomplete()样式
由于autocomplete()方法是弹窗，然后鼠标悬停的样式。通过Firebug 想获取到
悬停时背景的样式，可以直接通过jquery.ui.css 里面找相应的CSS。

//无须修改ui 里的CSS，直接用style.css 替代掉 
.ui-menu-item a.ui-state-focus { 
 
 background:url(../img/xxx.png); 
 
}

三．autocomplete()方法的属性
自动补全方法有两种形式：1.autocomplete(options)，options 是以对象键值对
的形式传参，每个键值对表示一个选项；2.autocomplete('action', param)，action
是操作对话框方法的字符串，param 则是options 的某个选项。

autocomplete 外观选项
属性	默认值/类型	说明
disabled	false/布尔值	设置为true，将禁止显示自动补全。
source	无/数组	指定数据源，可以是本地的，也可以是远程的。
minLength	1/数值	默认为1，触发补全列表最少输入字符数。
delay	300/数值	默认为300 毫秒，延迟显示设置。
autoFocus	false/布尔值	设置为true 时，第一个项目会自动被选定。

autocomplete 页面位置选项
属性	默认值/类型	说明
position	无/对象	使用对象的键值对赋值，有两个属性：my 和at 表示坐标。my 是以目标点左上角为基准，at 以目标点右下角为基准。

四．autocomplete()方法的事件
除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象，不
是整个对话框的div。
autocomplete 事件选项

autocomplete 事件选项
事件名	说明
create	当自动补全被创建时会调用create 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。
open	当自动补全被显示时，会调用open 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。
close	当自动补全被关闭时，会调用close 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。
focus	当自动补全获取焦点时，会调用focus 方法，该方法有两个参数(event, ui)。此事件中的ui 有一个子属性对象item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般label 和value 值相同。
select	当自动补全获被选定时，会调用select 方法，该方法有两个参数(event, ui)。此事件中的ui 有一个子属性对象item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般label 和value 值相同。
change	当自动补全失去焦点且内容发生改变时，会调用change 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。
search	当自动补全搜索完成后，会调用search 方法，该方法有两个参数(event, ui)。此事件中的ui 参数为空。
response	当自动补全搜索完成后，在菜单显示之前，会调用 response 方法，该方法有两个参数(event, ui)。此事件中的ui 参数有一个子对象content，他会返回label 和value 值，可通过遍历了解。