創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新華,十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

先看一下autocomplete的參數(shù)

• serviceUrl：服務(wù)器端的URL或者是返回 Url 字符串的回調(diào)函數(shù)

• ajaxSettings：jQuery Ajax 請(qǐng)求的額外配置

• lookup：查詢的數(shù)據(jù)列表。字符串?dāng)?shù)組或者對(duì)象字面量（格式 { value: 'string', data: any }）

• lookupFilter： function (suggestion, query, queryLowerCase) {} 本地?cái)?shù)據(jù)查詢的過(guò)濾函數(shù)

• lookupLimit：查詢條數(shù)限制，默認(rèn)值：no limit

• onSelect：function (suggestion) {} ，用戶選擇查詢結(jié)果后的毀掉函數(shù)

• minChars：觸發(fā)提示的最小單詞數(shù)，默認(rèn)值：1

• maxHeight：提示列表容器的最大高度，默認(rèn)值：300

• deferRequestBy：延遲Ajax請(qǐng)求的毫秒數(shù)，默認(rèn)值：0

• width：提示容器的寬度，默認(rèn)值：auto

• params：參數(shù)傳遞的請(qǐng)求，可選

• formatResult：function (suggestion, currentValue) {}

• delimiter：字符串或正則表達(dá)式，分割輸入值并將最后一個(gè)作為查詢?cè)~，一般逗號(hào)分割

• zIndex：提示容器的z-index值，默認(rèn)值：9999

• type：獲取提示的 Ajax 請(qǐng)求方式，默認(rèn)值：get

• noCache：是否緩存提示結(jié)果，默認(rèn)值：false

• onSearchStart：function (query) {}

• onSearchComplete：function (query, suggestions) {}

• onSearchError：function (query, jqXHR, textStatus, errorThrown) {}

• onInvalidateSelection：function () {}，選擇提示結(jié)果后，如果input的值發(fā)生變化則調(diào)用函數(shù)

• triggerSelectOnValidInput：如果匹配查詢，只要聚焦 input 就觸發(fā) onSelect 函數(shù)，默認(rèn)值：true

• preventBadQueries：默認(rèn)值：true

• beforeRender：function (container) {} 在展示查詢結(jié)果之前調(diào)用函數(shù)

• tabDisabled：默認(rèn)值：false

• paramName：默認(rèn)值：'query'

• transformResult：function(response, originalQuery) {}

• autoSelectFirst：是否自動(dòng)填充查詢列表的第一項(xiàng)，默認(rèn)值：false

• appendTo：查詢列表容器被添加到那個(gè)元素中，默認(rèn)值：document.body

• dataType：服務(wù)器返回的數(shù)據(jù)格式

• showNoSuggestionNotice：如果查詢結(jié)果為空是否有提示語(yǔ)，默認(rèn)值：false

• noSuggestionNotice：提示語(yǔ)，默認(rèn)值：No results

• forceFixPosition：默認(rèn)值：false

• orientation：提示容器的垂直位置，默認(rèn)值：'bottom'，可選值'top','auto'

• groupBy：提示數(shù)據(jù)對(duì)象的屬性值

配置參數(shù)很多，但是有用的可能就幾個(gè)。

實(shí)現(xiàn)多選的關(guān)鍵參數(shù)是 delimiter， onInvalidateSelection ， triggerSelectOnValidInput 

實(shí)際項(xiàng)目中autocomplete的難點(diǎn)在于需要查詢結(jié)果的索引值并保存到隱藏域中，所以 onInvalidateSelection ，triggerSelectOnValidInput 這兩個(gè)參數(shù)非常關(guān)鍵

Demo

該演示代碼的多選沒有刪除操作,留給大家一點(diǎn)思考的余地。當(dāng)然多選的方式不唯一。

See the Pen autocomplete by Zongbin Niu (@nzbin) on CodePen.