詳解jQuery UI庫(kù)中文本輸入自動(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)懸停的樣式。通過(guò)Firebug 想獲取到
懸停時(shí)背景的樣式，可以直接通過(guò)jquery.ui.css 里面找相應(yīng)的CSS。
//無(wú)須修改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)。
| 屬性 |
默認(rèn)值/類型 |
說(shuō)明 |
| disabled |
false/布爾值 |
設(shè)置為true，將禁止顯示自動(dòng)補(bǔ)全。 |
| source |
無(wú)/數(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,
});
| 屬性 |
默認(rèn)值/類型 |
說(shuō)明 |
| position |
無(wú)/對(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)
| 事件名 |
說(shuō)明 |
| 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
值，可通過(guò)遍歷了解。
|
$('#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)方法
| 方法 | 返回值 | 說(shuō)明 |
| 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ǔ)全
通過(guò)自動(dòng)補(bǔ)全source 屬性的function 回調(diào)函數(shù)，來(lái)動(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ò)濾無(wú)關(guān)結(jié)果，而是把整個(gè)結(jié)果全部呈現(xiàn)出
來(lái)。因?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);
},
});
- jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- jQuery實(shí)現(xiàn)感應(yīng)鼠標(biāo)動(dòng)畫(huà)效果自動(dòng)伸長(zhǎng)的輸入框?qū)嵗?/a>
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
- 基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動(dòng)完成功能
- 基于jQuery的輸入框無(wú)值自動(dòng)顯示指定數(shù)據(jù)的實(shí)現(xiàn)代碼
- jquery判斷字符輸入個(gè)數(shù)（數(shù)字英文長(zhǎng)度記為1，中文記為2，超過(guò)長(zhǎng)度自動(dòng)截?。?/a>
- jQuery 自動(dòng)增長(zhǎng)的文本輸入框?qū)崿F(xiàn)代碼
- jQuery實(shí)現(xiàn)自動(dòng)輸入email、時(shí)間和域名的方法
相關(guān)文章
jQuery pager.js 插件動(dòng)態(tài)分頁(yè)功能實(shí)例分析
這篇文章主要介紹了jQuery pager.js 插件動(dòng)態(tài)分頁(yè)功能,結(jié)合具體實(shí)例形式分析了pager.js 插件的定義及使用插件進(jìn)行分頁(yè)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-08-08
本文給大家分享的是使用jquery實(shí)現(xiàn)的全選刪除插件的代碼，非常的實(shí)用，本文示例是結(jié)合的ThinkPHP,小伙伴們可以自由擴(kuò)展。2015-03-03
jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲效果的滑動(dòng)菜單,涉及jquery鼠標(biāo)事件操作頁(yè)面屬性定時(shí)變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
日期時(shí)間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇日期時(shí)間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
AJAX實(shí)現(xiàn)瀑布流觸發(fā)分頁(yè)與分頁(yè)觸發(fā)瀑布流的方法
瀑布流觸發(fā)分頁(yè)可以理解為微博中的瀏覽效果、到一定程度時(shí)顯示頁(yè)數(shù)進(jìn)行分頁(yè),而分頁(yè)觸發(fā)瀑布流可以理解為T(mén)witter拉到一頁(yè)設(shè)定的最大條數(shù)后繼續(xù)用瀑布流展示下一頁(yè),接下來(lái)我們就來(lái)詳細(xì)看看AJAX實(shí)現(xiàn)瀑布流觸發(fā)分頁(yè)與分頁(yè)觸發(fā)瀑布流的方法2016-05-05
這篇文章主要介紹了jquery手風(fēng)琴特效插件,效果非常棒，需要的朋友可以參考下2015-02-02
jquery查找父元素、子元素(個(gè)人經(jīng)驗(yàn)總結(jié))
對(duì)使用js或者jquery查找父元素、子元素比較混淆的朋友可以參考下本文，因?yàn)槭莻€(gè)人總結(jié)，用起來(lái)會(huì)比較方便2014-04-04
從零學(xué)jquery之如何使用回調(diào)函數(shù)
回調(diào)函數(shù)指的是被調(diào)用者完成處理后自動(dòng)回調(diào)調(diào)用者預(yù)先傳遞的函數(shù)。2014-05-05
cssQuery()的下載與使用方法...2007-01-01
jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法,實(shí)例分析了jQuery實(shí)現(xiàn)form表單延時(shí)提交的技巧,需要的朋友可以參考下2015-03-03