详解jQuery UI库中文本输入自动补全功能的用法
更新时间：2016年04月23日 10:43:18 作者：初心始终钰
这篇文章主要介绍了详解jQuery UI库中文本输入自动补全功能的用法,其中重点讲解了常用的邮箱地址输入时后缀自动补全功能的使用,需要的朋友可以参考下
自动补全（autocomplete），是一个可以减少用户输入完整信息的UI 工具。一般在
输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。
一．调用autocomplete()方法
$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
});
二．修改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 时，第一个项目会自动被选定。 |
$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
disabled : false,
minLength : 2,
delay : 50,
autoFocus : true,
});
| 属性 |
默认值/类型 |
说明 |
| position |
无/对象 |
使用对象的键值对赋值，有两个属性：my 和at
表示坐标。my 是以目标点左上角为基准，at 以
目标点右下角为基准。
|
$('#email').autocomplete({
position : {
my : 'left center',
at : 'right center'
}
});
四．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
值，可通过遍历了解。
|
$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
disabled : false,
minLength : 1,
delay : 0,
focus : function (e, ui) {
ui.item.value = '123';
},
select : function (e, ui) {
ui.item.value = '123';
},
change : function (e, ui) {
alert('');
},
search : function (e, ui) {
alert('');
},
});
autocomplete('action', param)方法
| 方法 | 返回值 | 说明 |
| autocomplete('close') | jQuery 对象 | 关闭自动补齐 |
| autocomplete('disable') | jQuery 对象 | 禁用自动补齐 |
| autocomplete('enable') | jQuery 对象 | 启用自动补齐 |
| autocomplete('destroy') | jQuery 对象 | 删除自动补齐，直接阻断 |
| autocomplete('widget') | jQuery 对象 | 获取工具提示的jQuery 对象 |
| autocomplete('search',value) | jQuery 对象 | 在数据源获取匹配的字符串 |
| autocomplete('option', param) | 一般值 | 获取options 属性的值 |
| autocomplete('option', param,value) | jQuery 对象 | 设置options 属性的值 |
五、邮箱自动补全
通过自动补全source 属性的function 回调函数，来动态的设置数据源，以达到可以
实现邮箱补全功能。
1．数据源function
自动补全UI 的source 不但可以是数组，也可以是function 回调函数。提供了自带的
两个参数设置动态的数据源。
$('#email').autocomplete({
source : function (request, response) {
alert(request.term); //可以获取你输入的值
response(['aa', 'aaaa', 'aaaaaa', 'bb']); //展示补全结果
},
});
注意：这里的response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出
来。因为source 数据源，本身就是动态改变的，就由自定义，从而放弃系统内置的搜索能力。
2．邮箱自动补全
$('#email').autocomplete({
autoFocus : true,
delay : 0,
source : function (request, response) {
var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始
term = request.term, //获取输入值
ix = term.indexOf('@'), //@
name = term, //用户名
host = '', //域名
result = []; //结果
//结果第一条是自己输入
result.push(term);
if (ix > -1) { //如果有@的时候
name = term.slice(0, ix); //得到用户名
host = term.slice(ix + 1); //得到域名
}
if (name) {
//得到找到的域名
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1;
}) : hosts),
//最终列表的邮箱
findedResults = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
//增加一个自我输入
result = result.concat(findedResults);
}
response(result);
},
});
您可能感兴趣的文章:
- jQuery实现文本框邮箱输入自动补全效果
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery.fastLiveFilter.js实现输入自动过滤的方法
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- jQuery实现感应鼠标动画效果自动伸长的输入框实例
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- 基于jquery实现的类似百度搜索的输入框自动完成功能
- 基于jQuery的输入框无值自动显示指定数据的实现代码
- jquery判断字符输入个数（数字英文长度记为1，中文记为2，超过长度自动截取）
- jQuery 自动增长的文本输入框实现代码
- jQuery实现自动输入email、时间和域名的方法
相关文章
jquery 获取select数组与name数组长度的实现代码
下面小编就为大家带来一篇jquery 获取select数组与name数组长度的实现代码。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
同一个标签上点击后有多个事件，如果只想执行第一个事件而放弃后面的事件该怎么办呢？event.stopPropagation()可实现这个需求2014-07-07
这篇文章主要介绍了15个jquery常用方法、小技巧分享,本文总结了一些开发中常用的方法,例如获取td的行标和列标、判断是否是回车按下、全选和反选等,需要的朋友可以参考下2015-01-01
本文主要介绍了Jqprint实现页面打印的具体方法，并提供了Jqprint插件下载。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下2017-07-07
这篇文章主要为大家详细介绍了jQuery实现图片文字淡入淡出效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
下面小编就为大家带来一篇由简入繁实现Jquery树状结构的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jQuery each和js forEach用法,结合实例形式对比分析了jQuery each和js forEach具体使用方法及相关操作注意事项,需要的朋友可以参考下2019-02-02
下面小编就为大家带来一篇jquery点击改变class并toggle的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
jQuery判断元素显示或隐藏, is 函数，需要的朋友可以参考下。2011-04-04
最新评论