詳解jQueryUI庫中文本輸入自動補全功能的用法_jquery

來源：懂視網責編：小采時間：2020-11-27 20:53:44

詳解jQueryUI庫中文本輸入自動補全功能的用法_jquery

詳解jQueryUI庫中文本輸入自動補全功能的用法_jquery:自動補全（autocomplete），是一個可以減少用戶輸入完整信息的UI 工具。一般在輸入郵箱、搜索關鍵字等，然后提取出相應完整字符串供用戶選擇。一．調用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.co

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解jQueryUI庫中文本輸入自動補全功能的用法_jquery:自動補全（autocomplete），是一個可以減少用戶輸入完整信息的UI 工具。一般在輸入郵箱、搜索關鍵字等，然后提取出相應完整字符串供用戶選擇。一．調用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.co

自動補全（autocomplete），是一個可以減少用戶輸入完整信息的UI 工具。一般在
輸入郵箱、搜索關鍵字等，然后提取出相應完整字符串供用戶選擇。

一．調用autocomplete()方法

二．修改autocomplete()樣式
由于autocomplete()方法是彈窗，然后鼠標懸停的樣式。通過Firebug 想獲取到
懸停時背景的樣式，可以直接通過jquery.ui.css 里面找相應的CSS。

//無須修改ui 里的CSS，直接用style.css 替代掉 
.ui-menu-item a.ui-state-focus { 
 
 background:url(../img/xxx.png); 
 
}

三．autocomplete()方法的屬性
自動補全方法有兩種形式：1.autocomplete(options)，options 是以對象鍵值對
的形式傳參，每個鍵值對表示一個選項；2.autocomplete('action', param)，action
是操作對話框方法的字符串，param 則是options 的某個選項。

autocomplete 外觀選項
屬性	默認值/類型	說明
disabled	false/布爾值	設置為true，將禁止顯示自動補全。
source	無/數組	指定數據源，可以是本地的，也可以是遠程的。
minLength	1/數值	默認為1，觸發補全列表最少輸入字符數。
delay	300/數值	默認為300 毫秒，延遲顯示設置。
autoFocus	false/布爾值	設置為true 時，第一個項目會自動被選定。

autocomplete 頁面位置選項
屬性	默認值/類型	說明
position	無/對象	使用對象的鍵值對賦值，有兩個屬性：my 和at 表示坐標。my 是以目標點左上角為基準，at 以目標點右下角為基準。

四．autocomplete()方法的事件
除了屬性設置外，autocomplete()方法也提供了大量的事件。這些事件可以給各
種不同狀態時提供回調函數。這些回調函數中的this 值等于對話框內容的div 對象，不
是整個對話框的div。
autocomplete 事件選項

autocomplete 事件選項
事件名	說明
create	當自動補全被創建時會調用create 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數為空。
open	當自動補全被顯示時，會調用open 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數為空。
close	當自動補全被關閉時，會調用close 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數為空。
focus	當自動補全獲取焦點時，會調用focus 方法，該方法有兩個參數(event, ui)。此事件中的ui 有一個子屬性對象item，分別有兩個屬性：label，補全列表顯示的文本；value，將要輸入框的值。一般label 和value 值相同。
select	當自動補全獲被選定時，會調用select 方法，該方法有兩個參數(event, ui)。此事件中的ui 有一個子屬性對象item，分別有兩個屬性：label，補全列表顯示的文本；value，將要輸入框的值。一般label 和value 值相同。
change	當自動補全失去焦點且內容發生改變時，會調用change 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數為空。
search	當自動補全搜索完成后，會調用search 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數為空。
response	當自動補全搜索完成后，在菜單顯示之前，會調用 response 方法，該方法有兩個參數(event, ui)。此事件中的ui 參數有一個子對象content，他會返回label 和value 值，可通過遍歷了解。