Jquery ui autocomplete簡單api

重要說明：與配置選項相似，Autocomplete插件的方法也 不是直接調用，並且經過 autocomplete()方法進行間接調用。例如：

$("#title").autocomplete( "方法名", "參數1", "參數2" );

 

Autocomplete的方法列表

close()

 

關閉自動完成顯示的菜單。

$( "#title" ).autocomplete( "close" );

 

destroy()

徹底移除自動完成功能。

$( "#title" ).autocomplete( "destroy" );

 

disable()

禁用Autocomplete。

$( "#title" ).autocomplete( "disable" );

 

enable()

啓用Autocomplete。

$( "#title" ).autocomplete( "enable" );

 

instance()

返回Autocomplete的對象實例。若是指定元素沒有關聯的實例，則返回undefined。

$( "#title" ).autocomplete( "instance" );

 

option( [ optionName [, value ] ] )

設置或返回Autocomplete的配置選項。該方法有如下4種形式：

// 形式一：以對象形式返回全部配置選項。
var options = $( "#title" ).autocomplete( "option" );

// 形式二：根據選項名稱獲取單個配置選項
var isDisabled= $( "#title" ).autocomplete( "option", "disabled" );

// 形式三：設置指定配置選項的值
$( "#title" ).autocomplete( "option", "disabled", true );

// 形式四：以對象形式同時設置一個或多個配置選項的值
$( "#title" ).autocomplete( "option", { "disabled": true, "delay": 500 } );

 

search( [ value ] )

觸發search事件，若是該事件未被取消的話，Autocomplete將調用數據源來顯示菜單。若是沒有爲其指定value參數，它將當前輸入元素的值(指定了的話，就使用指定的value值)。

$( "#title" ).autocomplete( "search", "Chin" );

 

widget()

返回匹配菜單元素的jQuery對象(實際匹配一個div元素，該div內用於放置顯示菜單的html內容)。儘管菜單項是即時建立和銷燬的，但菜單元素自己並不會重複建立和銷燬。它在初始化時被建立，而後一直被重複使用。

$( "#title" ).autocomplete( "widget" );

 

 

 

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