详解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-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

值,可通过遍历了解。

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgywww.html