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


Posted in Javascript onApril 23, 2016

自动补全(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 的某个选项。

autocomplete 外观选项
属性 默认值/类型 说明
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, 
 
});

autocomplete 页面位置选项
属性 默认值/类型 说明
position 无/对象 使用对象的键值对赋值,有两个属性:my 和at 表示坐标。my 是以目标点左上角为基准,at 以 目标点右下角为基准。

$('#email').autocomplete({ 
 
  position : { 
 
   my : 'left center', 
 
   at : 'right center' 
 
  } 
 
});

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

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('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 属性的值
$('#reg').on('autocompleteopen', function () { alert('打开时触发!'); });

五、邮箱自动补全
  通过自动补全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); 
 
  }, 
 
});
Javascript 相关文章推荐
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 #Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 #Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 #Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 #Javascript
jQuery 监控键盘一段时间没输入
Apr 22 #Javascript
基于jquery实现轮播特效
Apr 22 #Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
javascript 对象的定义方法
2007/01/10 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python进程管理工具supervisor使用实例
2014/09/17 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
详解Python文件修改的两种方式
2019/08/22 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python如何保存文本文件
2020/06/07 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
error和exception有什么区别
2012/10/02 面试题
励志演讲稿200字
2014/08/21 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书