自動補全（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 的某個選項。
| 屬性 | 默認(rèn)值/類型 | 說明 |
| disabled | false/布爾值 | 設(shè)置為true，將禁止顯示自動補全。 |
| source | 無/數(shù)組 | 指定數(shù)據(jù)源，可以是本地的，也可以是遠程的。 |
| 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, }); | 屬性 | 默認(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 事件選項
| 事件名 | 說明 |
| 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('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ù)源，以達到可以
實現(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); }, }); 新聞熱點
疑難解答
