關(guān)于devbridge-autocomplete插件多選操作的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)

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

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

  

  成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比鐵東網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鐵東網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鐵東地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

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

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

• lookupFilter： function (suggestion, query, queryLowerCase) {} 本地數(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á)式，分割輸入值并將最后一個作為查詢詞，一般逗號分割

• 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：查詢列表容器被添加到那個元素中，默認(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ù)很多，但是有用的可能就幾個。

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

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

Demo

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

新聞名稱：關(guān)于devbridge-autocomplete插件多選操作的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
文章來源：http://muchs.cn/article26/coeecg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、品牌網(wǎng)站建設(shè)、外貿(mào)建站、響應(yīng)式網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)