初心始终钰 通过本文主要向大家介绍了jQueryUI,自动补全,jQuery等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
自动补全（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 的某个选项。
| 属性 |
默认值/类型 |
说明 |
| 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,
});
| 属性 |
默认值/类型 |
说明 |
| position |
无/对象 |
$('#email').autocomplete({
position : {
my : 'left center',
at : 'right center'
}
});
四．autocomplete()方法的事件
除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象，不
是整个对话框的div。
autocomplete 事件选项
| 事件名 |
说明 |
| create |
|
| open |
|
| close |
|
| focus |
|
| select |
|
| change |
|
| search |
|
| response |
$('#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)方法