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

前端之家收集整理的这篇文章主要介绍了详解jQuery UI库中文本输入自动补全功能的用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

自动补全(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 方法,该方法有两个
自动补全被显示时,会调用open 方法,该方法有两个
自动补全被关闭时,会调用close 方法,该方法有两个
自动补全获取焦点时,会调用focus 方法,该方法有两
属性对象item,
属性:label,补全列表显示的文本;value,
自动补全获被选定时,会调用select 方法,该方法有两
属性对象item,
属性:label,补全列表显示的文本;value,
自动补全失去焦点且内容发生改变时,会调用change
方法,该方法有两个参数(event,ui)。此事件中的ui 参数
自动补全搜索完成后,会调用search 方法,该方法
自动补全搜索完成后,在菜单显示之前,会调用
方法,该方法有两个参数(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">

<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="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>一个自我输入 
 result = result.concat(findedResults); 

}

response(result);

},});

原文链接:https://www.f2er.com/jquery/49196.html

猜你在找的jQuery相关文章

autocomplete('action',param)方法