详解jQueryUI库中文本输入自动补全功能的用法_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了详解jQueryUI库中文本输入自动补全功能的用法_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5098字，纯文字阅读大概需要8分钟。
内容图文
自动补全（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 的某个选项。
| 属性 |
默认值/类型 |
说明 |
| disabled |
false/布尔值 |
设置为true，将禁止显示自动补全。 |
| source |
无/数组 |
指定数据源，可以是本地的，也可以是远程的。 |
| minLength |
1/数值 |
默认为1，触发补全列表最少输入字符数。 |
| delay |
300/数值 |
默认为300 毫秒，延迟显示设置。 |
| autoFocus |
false/布尔值 |
设置为true 时，第一个项目会自动被选定。 |
| 属性 |
默认值/类型 |
说明 |
| position |
无/对象 |
使用对象的键值对赋值，有两个属性：my 和at
表示坐标。my 是以目标点左上角为基准，at 以
目标点右下角为基准。
|
四．autocomplete()方法的事件
除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象，不
是整个对话框的div。
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
值，可通过遍历了解。
|
五、邮箱自动补全
通过自动补全source 属性的function 回调函数，来动态的设置数据源，以达到可以
实现邮箱补全功能。
1．数据源function
自动补全UI 的source 不但可以是数组，也可以是function 回调函数。提供了自带的
两个参数设置动态的数据源。
注意：这里的response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出
来。因为source 数据源，本身就是动态改变的，就由自定义，从而放弃系统内置的搜索能力。
2．邮箱自动补全
内容总结
以上是互联网集市为您收集整理的详解jQueryUI库中文本输入自动补全功能的用法_jquery全部内容，希望文章能够帮你解决详解jQueryUI库中文本输入自动补全功能的用法_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。