詳解jQuery UI庫中文本輸入自動(dòng)補(bǔ)全功能的用法

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

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

自動(dòng)補(bǔ)全（autocomplete），是一個(gè)可以減少用戶輸入完整信息的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 想獲取到
懸停時(shí)背景的樣式，可以直接通過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()方法的屬性
自動(dòng)補(bǔ)全方法有兩種形式：1.autocomplete(options)，options 是以對(duì)象鍵值對(duì)
的形式傳參，每個(gè)鍵值對(duì)表示一個(gè)選項(xiàng)；2.autocomplete('action', param)，action
是操作對(duì)話框方法的字符串，param 則是options 的某個(gè)選項(xiàng)。

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

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

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

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

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

autocomplete 事件選項(xiàng)
事件名	說明
create	當(dāng)自動(dòng)補(bǔ)全被創(chuàng)建時(shí)會(huì)調(diào)用create 方法，該方法有兩個(gè) 參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
open	當(dāng)自動(dòng)補(bǔ)全被顯示時(shí)，會(huì)調(diào)用open 方法，該方法有兩個(gè) 參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
close	當(dāng)自動(dòng)補(bǔ)全被關(guān)閉時(shí)，會(huì)調(diào)用close 方法，該方法有兩個(gè) 參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
focus	當(dāng)自動(dòng)補(bǔ)全獲取焦點(diǎn)時(shí)，會(huì)調(diào)用focus 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 有一個(gè)子屬性對(duì)象item，分別有兩個(gè)屬性：label，補(bǔ)全列表顯示的文本；value，將要輸入框的值。一般label 和value 值相同。
select	當(dāng)自動(dòng)補(bǔ)全獲被選定時(shí)，會(huì)調(diào)用select 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 有一個(gè)子屬性對(duì)象item，分別有兩個(gè)屬性：label，補(bǔ)全列表顯示的文本；value，將要輸入框的值。一般label 和value 值相同。
change	當(dāng)自動(dòng)補(bǔ)全失去焦點(diǎn)且內(nèi)容發(fā)生改變時(shí)，會(huì)調(diào)用change 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù) 為空。
search	當(dāng)自動(dòng)補(bǔ)全搜索完成后，會(huì)調(diào)用search 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)為空。
response	當(dāng)自動(dòng)補(bǔ)全搜索完成后，在菜單顯示之前，會(huì)調(diào)用 response 方法，該方法有兩個(gè)參數(shù)(event, ui)。此事件中的ui 參數(shù)有一個(gè)子對(duì)象content，他會(huì)返回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 對(duì)象
關(guān)閉自動(dòng)補(bǔ)齊
autocomplete('disable')
 jQuery 對(duì)象
禁用自動(dòng)補(bǔ)齊
autocomplete('enable')
 jQuery 對(duì)象
啟用自動(dòng)補(bǔ)齊
autocomplete('destroy')
 jQuery 對(duì)象
刪除自動(dòng)補(bǔ)齊，直接阻斷
autocomplete('widget')
 jQuery 對(duì)象
獲取工具提示的jQuery 對(duì)象
autocomplete('search',value)
 jQuery 對(duì)象
在數(shù)據(jù)源獲取匹配的字符串
autocomplete('option', param) 
一般值
獲取options 屬性的值
autocomplete('option', param,value)
 jQuery 對(duì)象
設(shè)置options 屬性的值

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

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

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

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

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

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

2．郵箱自動(dòng)補(bǔ)全

$('#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) {    //如果有@的時(shí)候 
 
     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; 
 
             }); 
 
     //增加一個(gè)自我輸入 
     result = result.concat(findedResults); 
 
   } 
 
   response(result); 
 
  }, 
 
});

您可能感興趣的文章: