jQuery UI Autocomplete插件 事件API

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屬性,以及其它自定義(如果有的話)的屬性
    }
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章