# Autocomplete Widget
Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## version added: 1.8
**Description:** 自動完成功能根據用戶輸入值進行搜索和過濾,讓用戶快速找到并從預設值列表中選擇。
## QuickNav[Examples](#entry-examples)
### Options
+ [appendTo](#option-appendTo)
+ [autoFocus](#option-autoFocus)
+ [delay](#option-delay)
+ [disabled](#option-disabled)
+ [minLength](#option-minLength)
+ [position](#option-position)
+ [source](#option-source)
### Methods
+ [close](#method-close)
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [option](#method-option)
+ [search](#method-search)
+ [widget](#method-widget)
### Extension Points
+ [_renderItem](#method-_renderItem)
+ [_renderMenu](#method-_renderMenu)
+ [_resizeMenu](#method-_resizeMenu)
### Events
+ [change](#event-change)
+ [close](#event-close)
+ [create](#event-create)
+ [focus](#event-focus)
+ [open](#event-open)
+ [response](#event-response)
+ [search](#event-search)
+ [select](#event-select)
任何可以接收輸入的字段都可以轉換為 Autocomplete,即,`<input>` 元素,`<textarea>` 元素及帶有 `contenteditable` 屬性的元素。
通過給 Autocomplete 字段焦點或者在其中輸入字符,插件開始搜索匹配的條目并顯示供選擇的值的列表。通過輸入更多的字符,用戶可以過濾列表以獲得更好的匹配。
該部件可用于選擇先前選定的值,比如輸入文章標簽或者輸入從地址簿中輸入地址郵件地址。Autocomplete 也可以用來填充相關的信息,比如輸入一個城市的名稱來獲得該城市的郵政編碼。
您可以從本地源或者遠程源獲取數據:本地源適用于小數據集,例如,帶有 50 個條目的地址簿;遠程源適用于大數據集,比如,帶有數百個或者成千上萬個條目的數據庫。如需了解更多有關自定義數據源的信息,請查看 [`source`](#option-source) 選項的文檔。
### 鍵盤交互(Keyboard interaction)
當菜單打開時,下面的鍵盤命令可用:
* UP - 移動焦點到上一個項目。如果在第一個項目上,則移動焦點到輸入(input)。如果在輸入(input)上,則移動焦點到最后一個項目。
* DOWN - 移動焦點到下一個項目。如果在最后一個項目上,則移動焦點到輸入(input)。如果在輸入(input)上,則移動焦點到第一個項目。
* ESCAPE - 關閉菜單。
* ENTER - 選擇當前獲得焦點的項目,并關閉菜單。
* TAB - 選擇當前獲得焦點的項目,關閉菜單,并移動焦點到下一個可聚焦(focusable)的元素。
* PAGE UP/DOWN - 滾動一屏的項目(基于菜單的高度)。
當菜單關閉時,下面的鍵盤命令可用:
* UP/DOWN - 如果滿足 [`minLength`](#option-minLength),則打開菜單。
### 主題(Theming)
自動完成部件(Autocomplete Widget)使用 [jQuery UI CSS 框架](/jqueryui/api-css-framework.html) 來定義它的外觀和感觀的樣式。如果需要使用自動完成部件指定的樣式,則可以使用下面的 CSS class 名稱:
* `ui-autocomplete`:用于顯示匹配用戶的 [菜單(menu)](/jqueryui/api-menu.html#theming)
* `ui-autocomplete-input`:自動完成部件(Autocomplete Widget)實例化的 input 元素。
### 依賴(Dependencies)
* [UI 核心(UI Core)](/jqueryui/ref-ui-core.html)
* [部件庫(Widget Factory)](/jqueryui/api-jQuery-widget.html)
* [定位(Position)](/jqueryui/api-position.html)
* [菜單部件(Menu Widget)](/jqueryui/api-menu.html)
### 其他注意事項:
* 該部件要求一些功能性的 CSS,否則將無法工作。如果您創建了一個自定義的主題,請使用小部件指定的 CSS 文件作為起點。
* 該部件以編程方式操作元素的值,因此當元素的值改變時不會觸發原生的 `change` 事件。
## 選項
### appendTo**Type:** [Selector](http://api.jquery.com/Types/#Selector)
**Default:** `null`
菜單應該被附加到哪一個元素。當該值為 `null` 時,輸入域的父元素將檢查 `ui-front` class。如果找到帶有 `ui-front` class 的元素,菜單將被附加到該元素。如果未找到帶有 `ui-front` class 的元素,不管值為多少,菜單將被附加到 body。
**注意:** 當建議菜單打開時,`appendTo` 選項不應改變。**Code examples:**
初始化帶有指定 `appendTo` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ appendTo: "#someElem" });
```
在初始化后,獲取或設置 `appendTo` 選項:
```
// getter
var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
// setter
$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
```
### autoFocus**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果設置為 `true`,當菜單顯示時,第一個條目將自動獲得焦點。**Code examples:**
初始化帶有指定 `autoFocus` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ autoFocus: true });
```
在初始化后,獲取或設置 `autoFocus` 選項:
```
// getter
var autoFocus = $( ".selector" ).autocomplete( "option", "autoFocus" );
// setter
$( ".selector" ).autocomplete( "option", "autoFocus", true );
```
### delay**Type:** [Integer](http://api.jquery.com/Types/#Integer)
**Default:** `300`按鍵和執行搜索之間的延遲,以毫秒計。對于本地數據,采用零延遲是有意義的(更具響應性),但對于遠程數據會產生大量的負荷,同時降低了響應性。**Code examples:**
初始化帶有指定 `delay` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ delay: 500 });
```
在初始化后,獲取或設置 `delay` 選項:
```
// getter
var delay = $( ".selector" ).autocomplete( "option", "delay" );
// setter
$( ".selector" ).autocomplete( "option", "delay", 500 );
```
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果設置為 `true`,則禁用該 autocomplete。**Code examples:**
初始化帶有指定 `disabled` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ disabled: true });
```
在初始化后,獲取或設置 `disabled` 選項:
```
// getter
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
// setter
$( ".selector" ).autocomplete( "option", "disabled", true );
```
### minLength**Type:** [Integer](http://api.jquery.com/Types/#Integer)
**Default:** `1`執行搜索前用戶必須輸入的最小字符數。對于僅帶有幾項條目的本地數據,通常設置為零,但是當單個字符搜索會匹配幾千項條目時,設置個高數值是很有必要的。**Code examples:**
初始化帶有指定 `minLength` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ minLength: 0 });
```
在初始化后,獲取或設置 `minLength` 選項:
```
// getter
var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
// setter
$( ".selector" ).autocomplete( "option", "minLength", 0 );
```
### position**Type:** [Object](http://api.jquery.com/Types/#Object)
**Default:** `{ my: "left top", at: "left bottom", collision: "none" }`標識建議菜單的位置與相關的 input 元素有關系。`of` 選項默認為 input 元素,但是您可以指定另一個定位元素。如需了解各種選項的更多細節,請查看 [jQuery UI Position](/position/)。**Code examples:**
初始化帶有指定 `position` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
```
在初始化后,獲取或設置 `position` 選項:
```
// getter
var position = $( ".selector" ).autocomplete( "option", "position" );
// setter
$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
```
### source**Type:** [Array](http://api.jquery.com/Types/#Array) or [String](http://api.jquery.com/Types/#String) or [Function](http://api.jquery.com/Types/#Function)( [Object](http://api.jquery.com/Types/#Object) request, [Function](http://api.jquery.com/Types/#Function) response( [Object](http://api.jquery.com/Types/#Object) data ) )
**Default:** `none`; 必須指定定義要使用的數據,必須指定。
獨立于您要使用的變量,標簽總是被視為文本。如果您想要標簽被視為 html,您可以使用 [Scott González' html 擴展](https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js) 。演示側重于 `source` 選項的不同變量 - 您可以查找其中匹配您的使用情況的那個,并查看相關代碼。
**支持多個類型:**
* **Array**:可用于本地數據的一個數組。支持兩種格式:
* 字符串數組:`[ "Choice1", "Choice2" ]`
* 帶有 `label` 和 `value` 屬性的對象數組:`[ { label: "Choice1", value: "value1" }, ... ]`label 屬性顯示在建議菜單中。當用戶選擇一個條目時,value 將被插入到 input 元素中。如果只是指定了一個屬性,則該屬性將被視為 label 和 value,例如,如果您只提供了 `value` 屬性,value 也會被視為標簽。
* **String**:當使用一個字符串,Autocomplete 插件希望該字符串指向一個能返回 JSON 數據的 URL 資源。它可以是在相同的主機上,也可以是在不同的主機上(必須提供 JSONP)。Autocomplete 插件不過濾結果,而是通過一個 `term` 字段添加了一個查詢字符串,用于服務器端腳本過濾結果。例如,如果 `source` 選項設置為 `"http://example.com"`,且用戶鍵入了 `foo`,GET 請求則為 `http://example.com?term=foo`。數據本身的格式可以與前面描述的本地數據的格式相同。
* **Function**:第三個變量,一個回調函數,提供最大的靈活性,可用于連接任何數據源到 Autocomplete。回調函數接受兩個參數:
* 一個 `request` 對象,帶有一個 `term` 屬性,表示當前文本輸入中的值。例如,如果用戶在 city 字段輸入 `"new yo"`,則 Autocomplete term 等同于 `"new yo"`。
* 一個 `response` 回調函數,提供單個參數:建議給用戶的數據。該數據應基于被提供的 term 進行過濾,且可以是上面描述的本地數據的任何格式。用于在請求期間提供自定義 source 回調來處理錯誤。即使遇到錯誤,您也必須調用 `response` 回調函數。這就確保了小部件總是正確的狀態。
當過濾本地數據時,您可以使用內置的 `$.ui.autocomplete.escapeRegex` 函數。它會接受一個字符串參數,轉義所有的正則表達式字符,讓結果安全地傳遞到 `new RegExp()`。
**Code examples:**
初始化帶有指定 `source` 選項的 autocomplete:
```
$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });
```
在初始化后,獲取或設置 `source` 選項:
```
// getter
var source = $( ".selector" ).autocomplete( "option", "source" );
// setter
$( ".selector" ).autocomplete( "option", "source", [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] );
```
## Methods
### close()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
關閉 Autocomplete 菜單。當與 [`search`](#method-search) 方法結合使用時,可用于關閉打開的菜單。
* 該方法不接受任何參數。
**Code examples:**
調用 close 方法:
```
$( ".selector" ).autocomplete( "close" );
```
### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
完全移除 autocomplete 功能。這會把元素返回到它的預初始化狀態。
* 該方法不接受任何參數。
**Code examples:**
調用 destroy 方法:
```
$( ".selector" ).autocomplete( "destroy" );
```
### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
禁用 autocomplete。
* 該方法不接受任何參數。
**Code examples:**
調用 disable 方法:
```
$( ".selector" ).autocomplete( "disable" );
```
### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
啟用 autocomplete。
* 該方法不接受任何參數。
**Code examples:**
調用 enable 方法:
```
$( ".selector" ).autocomplete( "enable" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
獲取當前與指定的 `optionName` 關聯的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取值的選項的名稱。
**Code examples:**
調用該方法:
```
var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
獲取一個包含鍵/值對的對象,鍵/值對表示當前 autocomplete 選項哈希。
* 該方法不接受任何參數。
**Code examples:**
調用該方法:
```
var options = $( ".selector" ).autocomplete( "option" );
```
### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
設置與指定的 `optionName` 關聯的 autocomplete 選項的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置的選項的名稱。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要為選項設置的值。
**Code examples:**
調用該方法:
```
$( ".selector" ).autocomplete( "option", "disabled", true );
```
### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
為 autocomplete 設置一個或多個選項。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)要設置的 option-value 對。
**Code examples:**
調用該方法:
```
$( ".selector" ).autocomplete( "option", { disabled: true } );
```
### search( [value ] )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
觸發 [`search`](#event-search) 事件,如果該事件未被取消則調用數據源。當被點擊時,可被類似選擇框按鈕用來打開建議。當不帶參數調用該方法時,則使用當前輸入的值。可帶一個空字符串和 `minLength: 0` 進行調用,來顯示所有的條目。
* **value**Type: [String](http://api.jquery.com/Types/#String)
**Code examples:**
調用 search 方法:
```
$( ".selector" ).autocomplete( "search", "" );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一個包含菜單元素的 `jQuery` 對象。雖然菜單項不斷地被創建和銷毀。菜單元素本身會在初始化時創建,并不斷的重復使用。
* 該方法不接受任何參數。
**Code examples:**
調用 widget 方法:
```
$( ".selector" ).autocomplete( "widget" );
```
## Extension Points
自動完成部件(Autocomplete Widget)通過 [部件庫(Widget Factory)](http://www.css88.com/jquery-ui-api/jQuery.widget/) 創建的,且可被擴展。當對部件進行擴展時,您可以重載或者添加擴展部件的行為。下面提供的方法作為擴展點,與上面列出的 [插件方法](#methods) 具有相同的 API 穩定性。如需了解更多有關小部件擴展的知識,請查看 [通過部件庫(Widget Factory)擴展小部件](http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/)。
### _renderItem( ul, item )Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
控制在部件菜單中每個選項的創建的格式化方法 該方法必須創建一個新的`<li>`元素,追加到菜單中,并返回它。
_注意: 為了與[menu](/menu/)小部件兼容,這時創建的`<ul>`元素必須包含一個`<a>`元素。 請看下面的例子。_
* **ul**Type: [jQuery](http://api.jquery.com/Types/#jQuery)新創建的 `<li>` 元素必須追加到的 `<ul>` 元素。
* **item**Type: [Object](http://api.jquery.com/Types/#Object)
* **label**Type: [String](http://api.jquery.com/Types/#String)條目顯示的字符串。
* **value**Type: [String](http://api.jquery.com/Types/#String)當條目被選中時插入到輸入框中的值。
**Code examples:**
添加條目的值作為 `<li>` 上的 data 屬性。
```
_renderItem: function( ul, item ) {
return $( "<li>" )
.attr( "data-value", item.value )
.append( $( "<a>" ).text( item.label ) )
.appendTo( ul );
}
```
### _renderMenu( ul, items )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
控制建立部件菜單的方法。該方法傳遞一個空`<ul>`和匹配用戶輸入的術語的項目數組。 創建當個的`<li>`元素應該委派給`_renderItemData()`。
* **ul**Type: [jQuery](http://api.jquery.com/Types/#jQuery)一個要作為小部件的菜單使用的空的 `<ul>`元素。
* **items**Type: [Array](http://api.jquery.com/Types/#Array)一個數組,數組元素為匹配用戶輸入的條目。每個條目是一個帶有 `label` 和 `value` 屬性的對象。
**Code examples:**
添加一個 CSS class 名稱到舊的菜單項。
```
_renderMenu: function( ul, items ) {
var that = this;
$.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
$( ul ).find( "li:odd" ).addClass( "odd" );
}
```
thod-_resizeMenu">
### _resizeMenu()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
該方法負責在菜單顯示前調整菜單尺寸。菜單元素可通過 `this.menu.element` 使用。
* 該方法不接受任何參數。
**Code examples:**
菜單總是顯示為 500 像素寬。
```
_resizeMenu: function() {
this.menu.element.outerWidth( 500 );
}
```
ction id="events">
## Events
### change( event, ui )Type: `autocompletechange`
如果輸入域的值改變則觸發該事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **item**Type: [Object](http://api.jquery.com/Types/#Object)從菜單中選擇的條目,否則屬性為 `null`。
**Code examples:**
初始化帶有指定 change 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
change: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompletechange 事件:
```
$( ".selector" ).on( "autocompletechange", function( event, ui ) {} );
```
### close( event, ui )Type: `autocompleteclose`
當菜單隱藏時觸發。不是每一個 `close` 事件都伴隨著 `change` 事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 close 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
close: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompleteclose 事件:
```
$( ".selector" ).on( "autocompleteclose", function( event, ui ) {} );
```
### create( event, ui )Type: `autocompletecreate`
當創建 autocomplete 時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 create 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
create: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompletecreate 事件:
```
$( ".selector" ).on( "autocompletecreate", function( event, ui ) {} );
```
### focus( event, ui )Type: `autocompletefocus`
當焦點移動到一個條目上(未選擇)時觸發。默認的動作是把文本域中的值替換為獲得焦點的條目的值,即使該事件是通過鍵盤交互觸發的。
取消該事件會阻止值被更新,但不會阻止菜單項獲得焦點。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **item**Type: [Object](http://api.jquery.com/Types/#Object)獲得焦點的條目。
**Code examples:**
初始化帶有指定 focus 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
focus: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompletefocus 事件:
```
$( ".selector" ).on( "autocompletefocus", function( event, ui ) {} );
```
### open( event, ui )Type: `autocompleteopen`
當打開建議菜單或者更新建議菜單時觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 open 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
open: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompleteopen 事件:
```
$( ".selector" ).on( "autocompleteopen", function( event, ui ) {} );
```
### response( event, ui )Type: `autocompleteresponse`
在搜索完成后菜單顯示前觸發。用于建議數據的本地操作,其中自定義的 [`source`](#option-source) 選項回調不是必需的。該事件總是在搜索完成時觸發,如果搜索無結果或者禁用了 Autocomplete,導致菜單未顯示,該事件一樣會被觸發。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **content**Type: [Array](http://api.jquery.com/Types/#Array)包含響應數據,且可被修改來改變顯示結果。該數據已經標準化,所以如果您要修改數據,請確保每個條目都包含 `value` 和 `label` 屬性。
**Code examples:**
初始化帶有指定 response 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
response: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompleteresponse 事件:
```
$( ".selector" ).on( "autocompleteresponse", function( event, ui ) {} );
```
### search( event, ui )Type: `autocompletesearch`
在搜索執行前滿足[`minLength`](#option-minLength) 和 [`delay`](#option-delay) 后觸發。如果取消該事件,則不會提交請求,也不會提供建議條目。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
_注意:`ui` 對象是空的,這里包含它是為了與其他事件保持一致性。_
**Code examples:**
初始化帶有指定 search 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
search: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompletesearch 事件:
```
$( ".selector" ).on( "autocompletesearch", function( event, ui ) {} );
```
### select( event, ui )Type: `autocompleteselect`
當從菜單中選擇條目時觸發。默認的動作是把文本域中的值替換為被選中的條目的值。
取消該事件會阻止值被更新,但不會阻止菜單關閉。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **item**Type: [Object](http://api.jquery.com/Types/#Object)An Object with `label` and `value` properties for the selected option.
**Code examples:**
初始化帶有指定 select 回調的 autocomplete:
```
$( ".selector" ).autocomplete({
select: function( event, ui ) {}
});
```
綁定一個事件監聽器到 autocompleteselect 事件:
```
$( ".selector" ).on( "autocompleteselect", function( event, ui ) {} );
```
## Examples:
#### Example: 一個簡單的 jQuery UI 自動完成(Autocomplete)。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<script>
$( "#autocomplete" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
});
</script>
</body>
</html>
```
#### Example: Using a custom source callback to match only the beginning of terms
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
</body>
</html>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架(CSS Framework)
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget