關于 devbridge-autocomplete 插件多選操作的實現方法

先看一下autocomplete的參數

• serviceUrl：服務器端的URL或者是返回 Url 字符串的回調函數

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

• lookup：查詢的數據列表。字符串數組或者對象字面量（格式 { value: 'string', data: any }）

• lookupFilter： function (suggestion, query, queryLowerCase) {} 本地數據查詢的過濾函數

• lookupLimit：查詢條數限制，默認值：no limit

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

• minChars：觸發提示的最小單詞數，默認值：1

• maxHeight：提示列表容器的最大高度，默認值：300

• deferRequestBy：延遲Ajax請求的毫秒數，默認值：0

• width：提示容器的寬度，默認值：auto

• params：參數傳遞的請求，可選

• formatResult：function (suggestion, currentValue) {}

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

• zIndex：提示容器的z-index值，默認值：9999

• type：獲取提示的 Ajax 請求方式，默認值：get

• noCache：是否緩存提示結果，默認值：false

• onSearchStart：function (query) {}

• onSearchComplete：function (query, suggestions) {}

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

• onInvalidateSelection：function () {}，選擇提示結果后，如果input的值發生變化則調用函數

• triggerSelectOnValidInput：如果匹配查詢，只要聚焦 input 就觸發 onSelect 函數，默認值：true

• preventBadQueries：默認值：true

• beforeRender：function (container) {} 在展示查詢結果之前調用函數

• tabDisabled：默認值：false

• paramName：默認值：'query'

• transformResult：function(response, originalQuery) {}

• autoSelectFirst：是否自動填充查詢列表的第一項，默認值：false

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

• dataType：服務器返回的數據格式

• showNoSuggestionNotice：如果查詢結果為空是否有提示語，默認值：false

• noSuggestionNotice：提示語，默認值：No results

• forceFixPosition：默認值：false

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

• groupBy：提示數據對象的屬性值

配置參數很多，但是有用的可能就幾個。

實現多選的關鍵參數是 delimiter， onInvalidateSelection ， triggerSelectOnValidInput 

實際項目中autocomplete的難點在于需要查詢結果的索引值并保存到隱藏域中，所以 onInvalidateSelection ，triggerSelectOnValidInput 這兩個參數非常關鍵

Demo

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

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