Autocomplete Widget · jQuery UI API 中文文檔 1.10

# 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> ```