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屬性，以及其它自定義(如果有的話)的屬性
    }
});