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

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

一．调用autocomplete()方法

rush:js;"> $('#email').autocomplete({

source : ['aaa@163.com','bbb@163.com','ccc@163.com'],});

二．修改autocomplete()样式

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

rush:java;"> //无须修改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 禁止显示自动补全。默认为1，触发补全列表最少输入字符数。默认为300 毫秒，延迟显示设置。一个项目会自动被选定。

rush:js;"> $('#email').autocomplete({

source : ['aaa@163.com',disabled : false,minLength : 2,delay : 50,autoFocus : true,});

autocomplete 页面位置选项属性默认值/类型属性：my 和at

左上角为基准，at 以

rush:js;"> $('#email').autocomplete({

position : {

my : 'left center',at : 'right center'

}

});

四．autocomplete()方法的事件

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

autocomplete 事件选项自动补全被创建时会调用create 方法，该方法有两个

自动补全被显示时，会调用open 方法，该方法有两个

自动补全被关闭时，会调用close 方法，该方法有两个

自动补全获取焦点时，会调用focus 方法，该方法有两

一个子属性对象item，

属性：label，补全列表显示的文本；value，

自动补全获被选定时，会调用select 方法，该方法有两

一个子属性对象item，

属性：label，补全列表显示的文本；value，

自动补全失去焦点且内容发生改变时，会调用change

方法，该方法有两个参数(event,ui)。此事件中的ui 参数

自动补全搜索完成后，会调用search 方法，该方法有

自动补全搜索完成后，在菜单显示之前，会调用

方法，该方法有两个参数(event,ui)。此事件中

一个子对象content，他会返回label 和value

rush:js;"> $('#email').autocomplete({

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)方法

<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 回调函数。提供了自带的两个参数设置动态的数据源。

rush:js;"> $('#email').autocomplete({

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="https://www.jb51.cc/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="https://www.jb51.cc/tag/zengjia/" target="_blank" class="keywords">增加</a><a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>自我输入 
 result = result.concat(findedResults);

}

response(result);

},});

jQuery 自动补全