先看一下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

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