jQuery UI Autocomplete支持事件處理,我們可以通過爲事件綁定處理函數,從而監聽並處理對應的事件。
Autocomplete的事件均可以在初始化的時候,以配置選項的形式設置,例如:
$( "#title" ).autocomplete({
change: function( event, ui ) { /* 這裏是函數內的代碼 */ }
});
你也可以通過jQuery的事件綁定方法,爲Autocomplete的指定事件添加處理函數。這使得Autocomplete的事件可以像常見的click、mouseover事件一樣,通過jQuery的事件方法進行處理。例如:
// autocompletechange 就是autocomplete插件的change事件
// autocomplete的事件全名均爲 "autocomplete"+"具體事件名"
$( "#title" ).on("autocompletechange", function( event, ui ) {
/* 這裏是函數內的代碼 */
} );
Autocomplete的事件列表
change 事件
當輸入框失去焦點時,如果其輸入內容發生改變,則觸發該事件。其事件全名爲autocompletechange
。
$( "#title" ).autocomplete({
change: function( event, ui ) {
// event 是當前事件對象
// ui對象僅有一個item屬性,它表示當前選擇的菜單項對應的數據源對象
// 該對象具有label和value屬性,以及其它自定義(如果有的話)的屬性
// 如果當前沒有選擇的菜單項,這item屬性爲null
}
});
close 事件
當菜單被隱藏(關閉)時觸發該事件。其事件全名爲autocompleteclose
。並不是每一個change事件都伴隨着一個close事件。
$( "#title" ).autocomplete({
close: function( event, ui ) {
// event 是當前事件對象
// ui對象是空的,只是爲了和其他事件的參數簽名保持一致
}
});
create 事件
當Autocomplete被創建時觸發該事件。其事件全名爲autocompletecreate
。
$( "#title" ).autocomplete({
create: function( event, ui ) {
// event 是當前事件對象
// ui對象是空的,只是爲了和其他事件的參數簽名保持一致
}
});
focus 事件
當任一菜單項獲得焦點時觸發該事件,該事件只會在通過鍵盤交互方式使菜單項獲得焦點時觸發。其事件全名爲autocompletefocus
。其默認行爲是將輸入框的文本內容更改爲當前選中項的value
屬性值。
取消該事件的默認行爲( event.preventDefault() ),可以阻止輸入框的值被更改,但不會阻止菜單項獲得焦點。
$( "#title" ).autocomplete({
focus: function( event, ui ) {
// event 是當前事件對象
// ui對象僅有一個item屬性,它表示當前獲取焦點的菜單項對應的數據源對象
// 該對象具有label和value屬性,以及其它自定義(如果有的話)的屬性
}
});
open 事件
當菜單顯示(打開)或被更新時觸發該事件。其事件全名爲autocompleteopen
。
$( "#title" ).autocomplete({
open: function( event, ui ) {
// event 是當前事件對象
// ui對象是空的,只是爲了和其他事件的參數簽名保持一致
}
});
response 事件
當自動完成的搜索完成,但尚未顯示菜單時觸發該事件。其事件全名爲autocompleteresponse
。你可以通過該事件來更改數據,從而修改顯示的菜單內容。
$( "#title" ).autocomplete({
response: function( event, ui ) {
// event 是當前事件對象
// ui對象僅有一個content屬性,它表示當前用於顯示菜單的數組數據
// 每個元素都是具有label和value屬性的對象
// 你可以對屬性進行更改,從而改變顯示的菜單內容
}
});
search 事件
當一次自動完成的搜索被執行前觸發該事件。其事件全名爲autocompletesearch
。如果被取消,則不會開始一個請求,並且不會顯示菜單項。
$( "#title" ).autocomplete({
search: function( event, ui ) {
// event 是當前事件對象
// ui對象是空的,只是爲了和其他事件的參數簽名保持一致
}
});
select 事件
當任一菜單項被選擇時觸發該事件。其事件全名爲autocompleteselect
。其默認行爲是將輸入框的文本內容更改爲當前選中項的value
屬性值。
取消該事件的默認行爲( event.preventDefault() ),可以阻止輸入框的值被更改,但不會阻止菜單被關閉。
$( "#title" ).autocomplete({
select: function( event, ui ) {
// event 是當前事件對象
// ui對象僅有一個item屬性,它表示當前被選中的菜單項對應的數據源對象
// 該對象具有label和value屬性,以及其它自定義(如果有的話)的屬性
}
});