關(guān)于 devbridge-autocomplete 插件多選操作的實(shí)現(xiàn)方法

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

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

• ajaxSettings：jQuery Ajax 請求的額外配置

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

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

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

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

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

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

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

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

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

• formatResult：function (suggestion, currentValue) {}

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

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

• type：獲取提示的 Ajax 請求方式，默認(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：是否自動填充查詢列表的第一項(xiàng)，默認(rèn)值：false

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

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

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

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

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

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

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

配置參數(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.