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

上一篇：JavaScript常用字符串与数组扩展函数小结

下一篇：jQuery UI库中dialog对话框功能使用全解析