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

更新時間：2016年04月23日 10:43:18 作者：初心始終鈺

這篇文章主要介紹了詳解jQuery UI庫中文本輸入自動補全功能的用法,其中重點講解了常用的郵箱地址輸入時后綴自動補全功能的使用,需要的朋友可以參考下

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

一．調(diào)用autocomplete()方法

$('#email').autocomplete({ 
 
  source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], 
 
});

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

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

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

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

$('#email').autocomplete({ 
 
  source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], 
 
  disabled : false, 
 
  minLength : 2, 
 
  delay : 50, 
 
  autoFocus : true, 
 
});

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

$('#email').autocomplete({ 
 
  position : { 
 
   my : 'left center', 
 
   at : 'right center' 
 
  } 
 
});

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

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

$('#email').autocomplete({ 
 
  source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], 
 
  disabled : false, 
 
  minLength : 1, 
 
  delay : 0, 
 
  focus : function (e, ui) { 
 
   ui.item.value = '123'; 
 
  }, 
 
  select : function (e, ui) { 
 
    ui.item.value = '123'; 
 
  }, 
 
  change : function (e, ui) { 
 
   alert(''); 
 
  }, 
 
  search : function (e, ui) { 
 
   alert(''); 
 
  }, 
 
}); 
autocomplete('action', param)方法

autocomplete('action', param)方法方法
返回值
說明
autocomplete('close')
 jQuery 對象
關(guān)閉自動補齊
autocomplete('disable')
 jQuery 對象
禁用自動補齊
autocomplete('enable')
 jQuery 對象
啟用自動補齊
autocomplete('destroy')
 jQuery 對象
刪除自動補齊，直接阻斷
autocomplete('widget')
 jQuery 對象
獲取工具提示的jQuery 對象
autocomplete('search',value)
 jQuery 對象
在數(shù)據(jù)源獲取匹配的字符串
autocomplete('option', param) 
一般值
獲取options 屬性的值
autocomplete('option', param,value)
 jQuery 對象
設(shè)置options 屬性的值

$('#reg').on('autocompleteopen', function () { 
 
  alert('打開時觸發(fā)！'); 
 
});

autocomplete('action', param)方法
方法	返回值	說明
autocomplete('close')	jQuery 對象	關(guān)閉自動補齊
autocomplete('disable')	jQuery 對象	禁用自動補齊
autocomplete('enable')	jQuery 對象	啟用自動補齊
autocomplete('destroy')	jQuery 對象	刪除自動補齊，直接阻斷
autocomplete('widget')	jQuery 對象	獲取工具提示的jQuery 對象
autocomplete('search',value)	jQuery 對象	在數(shù)據(jù)源獲取匹配的字符串
autocomplete('option', param)	一般值	獲取options 屬性的值
autocomplete('option', param,value)	jQuery 對象	設(shè)置options 屬性的值

五、郵箱自動補全
通過自動補全source 屬性的function 回調(diào)函數(shù)，來動態(tài)的設(shè)置數(shù)據(jù)源，以達(dá)到可以
實現(xiàn)郵箱補全功能。

1．?dāng)?shù)據(jù)源function
自動補全UI 的source 不但可以是數(shù)組，也可以是function 回調(diào)函數(shù)。提供了自帶的
兩個參數(shù)設(shè)置動態(tài)的數(shù)據(jù)源。

$('#email').autocomplete({ 
 
  source : function (request, response) { 
 
   alert(request.term);    //可以獲取你輸入的值 
 
   response(['aa', 'aaaa', 'aaaaaa', 'bb']);    //展示補全結(jié)果 
 
  }, 
 
});

注意：這里的response 不會根據(jù)你搜索關(guān)鍵字而過濾無關(guān)結(jié)果，而是把整個結(jié)果全部呈現(xiàn)出
來。因為source 數(shù)據(jù)源，本身就是動態(tài)改變的，就由自定義，從而放棄系統(tǒng)內(nèi)置的搜索能力。

2．郵箱自動補全

$('#email').autocomplete({ 
 
  autoFocus : true, 
 
  delay : 0, 
 
  source : function (request, response) { 
 
   var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'],    //起始 
 
     term = request.term,    //獲取輸入值 
 
     ix = term.indexOf('@'),    //@ 
 
     name = term,    //用戶名 
 
     host = '',    //域名  
 
     result = [];    //結(jié)果 
 
   //結(jié)果第一條是自己輸入 
   result.push(term); 
 
   if (ix > -1) {    //如果有@的時候 
 
     name = term.slice(0, ix);    //得到用戶名 
 
     host = term.slice(ix + 1);    //得到域名 
 
   } 
 
   if (name) { 
 
     //得到找到的域名 
     var findedHosts = (host ? $.grep(hosts, function (value, index) { 
 
                 return value.indexOf(host) > -1; 
 
               }) : hosts), 
 
     //最終列表的郵箱 
     findedResults = $.map(findedHosts, function (value, index) { 
 
              return name + '@' + value; 
 
             }); 
 
     //增加一個自我輸入 
     result = result.concat(findedResults); 
 
   } 
 
   response(result); 
 
  }, 
 
});

您可能感興趣的文章: