<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # 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,即,`&lt;input&gt;` 元素,`&lt;textarea&gt;` 元素及帶有 `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) 控制在部件菜單中每個選項的創建的格式化方法 該方法必須創建一個新的`&lt;li&gt;`元素,追加到菜單中,并返回它。 _注意: 為了與[menu](/menu/)小部件兼容,這時創建的`&lt;ul&gt;`元素必須包含一個`&lt;a&gt;`元素。 請看下面的例子。_ * **ul**Type: [jQuery](http://api.jquery.com/Types/#jQuery)新創建的 `&lt;li&gt;` 元素必須追加到的 `&lt;ul&gt;` 元素。 * **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:** 添加條目的值作為 `&lt;li&gt;` 上的 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)一個要作為小部件的菜單使用的空的 `&lt;ul&gt;`元素。 * **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> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看