20151217jqueryUI--自動補全工具

破玉發表於2015-12-17
jQueryUI

自動補全（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/ui_header_bg.png);
}

　　注意：其他修改方案類似。

三． autocomplete()方法的屬性
自動補全方法有兩種形式： 1.autocomplete(options)， options 是以物件鍵值對的形式傳參，
每個鍵值對錶示一個選項； 2.autocomplete('action', param)， action 是操作對話方塊方法的字元
串， param 則是 options 的某個選項。


$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
disabled : false,
minLength : 2,
delay : 50,
autoFocus : true,
});

　　

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

　　四． autocomplete()方法的事件
除了屬性設定外， autocomplete()方法也提供了大量的事件。 這些事件可以給各種不同狀
態時提供回撥函式。 這些回撥函式中的 this 值等於對話方塊內容的 div 物件， 不是整個對話方塊
的 div。

$('#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('');
},
});

　　

//關閉自動補全
$('#email').autocomplete('close');
//禁用自動補全
$('#email').autocomplete('disable');
//啟用自動補全
$('#email').autocomplete('enable');
//刪除自動補全
$('#email').autocomplete('destroy');
//獲取自動補全 jQuery 物件
$('#email').autocomplete('widget');
//設定自動補全 search
$('#email').autocomplete('search', '');
//獲取某個 options 的 param 選項的值
var delay = $('#email').autocomplete('option', 'delay');
alert(delay);
//設定某個 options 的 param 選項的值
$('#email').dialog('option', 'delay', 0);

　　五． autocomplete 中使用 on()
在 autocomplete 的事件中，提供了使用 on()方法處理的事件方法。

$('#reg').on('autocompleteopen', function () {
alert('開啟時觸發！ ');
});

　　

 



相關文章