详解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-itema.ui-state-focus{ background:url(../img/xxx.png); }
三.autocomplete()方法的属性
自动补全方法有两种形式:1.autocomplete(options),options是以对象键值对
的形式传参,每个键值对表示一个选项;2.autocomplete('action',param),action
是操作对话框方法的字符串,param则是options的某个选项。
$('#email').autocomplete({ source:['aaa@163.com','bbb@163.com','ccc@163.com'], disabled:false, minLength:2, delay:50, autoFocus:true, });
使用对象的键值对赋值,有两个属性:my和at
表示坐标。my是以目标点左上角为基准,at以
目标点右下角为基准。
$('#email').autocomplete({ position:{ my:'leftcenter', at:'rightcenter' } });
四.autocomplete()方法的事件
除了属性设置外,autocomplete()方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调函数。这些回调函数中的this值等于对话框内容的div对象,不
是整个对话框的div。
autocomplete事件选项
当自动补全被创建时会调用create方法,该方法有两个
参数(event,ui)。此事件中的ui参数为空。
当自动补全被显示时,会调用open方法,该方法有两个
参数(event,ui)。此事件中的ui参数为空。
当自动补全被关闭时,会调用close方法,该方法有两个
参数(event,ui)。此事件中的ui参数为空。
当自动补全获取焦点时,会调用focus方法,该方法有两
个参数(event,ui)。此事件中的ui有一个子属性对象item,
分别有两个属性:label,补全列表显示的文本;value,
将要输入框的值。一般label和value值相同。
当自动补全获被选定时,会调用select方法,该方法有两
个参数(event,ui)。此事件中的ui有一个子属性对象item,
分别有两个属性:label,补全列表显示的文本;value,
将要输入框的值。一般label和value值相同。
当自动补全失去焦点且内容发生改变时,会调用change
方法,该方法有两个参数(event,ui)。此事件中的ui参数
为空。
当自动补全搜索完成后,会调用search方法,该方法有
两个参数(event,ui)。此事件中的ui参数为空。
当自动补全搜索完成后,在菜单显示之前,会调用
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('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属性的值 $('#reg').on('autocompleteopen',function(){ alert('打开时触发!'); }); 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){ varhosts=['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){ //得到找到的域名 varfindedHosts=(host?$.grep(hosts,function(value,index){ returnvalue.indexOf(host)>-1; }):hosts), //最终列表的邮箱 findedResults=$.map(findedHosts,function(value,index){ returnname+'@'+value; }); //增加一个自我输入 result=result.concat(findedResults); } response(result); }, });