自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具。一般在
输入邮箱、搜索关键字等,然后提取出相应完整字符串供用户选择。
一.调用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 的某个选项。
autocomplete 外观选项
属性
禁止显示自动补全。
显示设置。
自动被选定。
source : ['aaa@163.com',disabled : false,minLength : 2,delay : 50,autoFocus : true,});
autocomplete 页面位置选项
属性
属性:my 和at
position : {
my : 'left center',at : 'right center'
}
});
四.autocomplete()方法的事件
除了
属性设置外,autocomplete()
方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调
函数。这些回调
函数中的this 值等于对话框
内容的div 对象,不
是整个对话框的div。
autocomplete 事件选项
autocomplete 事件选项
自动补全被创建时会调用create 方法,该方法有两个
属性对象item,
属性:label,补全列表
显示的文本;value,
属性对象item,
属性:label,补全列表
显示的文本;value,
自动补全失去焦点且
内容发生改变时,会
调用change
方法,该
方法有两个参数(event,ui)。此事件中的ui 参数
方法,该
方法有两个参数(event,ui)。此事件中
source : ['aaa@163.com',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,});
autocomplete('action',param)方法
<table border="1" cellspacing="1" cellpadding="1" width="700" height="500">
autocomplete('action',param)方法<tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">方法</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">返回值</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">说明</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('close')</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">关闭自动补齐</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('disable')</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">禁用自动补齐</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('enable')</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">启用自动补齐</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('destroy')</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">删除自动补齐,直接阻断</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('widget')</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">获取工具提示的jQuery 对象</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('search',value)</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">在数据源获取匹配的字符串</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('option',param)</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">一般值</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">获取options 属性的值</td></tr><tr><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">autocomplete('option',param,value)</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">jQuery 对象</td><td style="text-align: center"><span style="font-family: Courier New; font-size: 14px">设置options 属性的值</td></tr></table>
$('#reg').on('autocompleteopen',function () {
alert('打开时触发!');
});
五、邮箱自动补全
通过
自动补全source
属性的function 回调
函数,来动态的设置数据源,以达到可以
实现邮箱补全
功能。
1.数据源function
自动补全UI 的source 不但可以是数组,也可以是function 回调
函数。提供了
自带的
两个参数设置动态的数据源。
source : function (request,response) {
alert(request.term); //可以获取你输入的值
response(['aa','aaaa','aaaaaa','bb']); //展示补全结果
},});
注意:这里的response 不会根据你搜索关键字而过滤无关结果,而是把整个结果全部呈现出
来。因为source 数据源,本身就是动态改变的,就由自定义,从而放弃系统内置的搜索能力。
2.邮箱自动补全
autoFocus : true,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); //得到<a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>
host = term.slice(ix + 1); //得到域名
}
if (name) {
//得到找到的域名
var findedHosts = (host ? $.grep(hosts,function (value,index) {
return value.indexOf(host) > -1;
}) : hosts),//最终列表的邮箱
findedResults = $.map(findedHosts,index) {
return name + '@' + value;
});
//<a href="/tag/zengjia/" target="_blank" class="keywords">增加</a>一个自我输入
result = result.concat(findedResults);
}
response(result);
},});