简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

jQuery插件實作可輸入和自動匹配的下拉框

高洛峰
發布： 2016-12-09 11:46:46
原創
1734 人瀏覽過

實現可輸入+帶自動匹配功能的下拉框，我試過以下幾種方法：

1.直接使用h5的新標籤，對應demo如下：

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>
登入後複製

   

優點：節約js程式碼；

缺點：IE 9及以下的IE瀏覽器和Safari 均不支援 標籤（好像還有幾個瀏覽器也不支援）；重複點擊輸入框或下拉圖示並不能收回下拉清單；樣式難以控制

2.使用基於jQuery的select2外掛程式（需要同時引入select2.css和select2.js），html部分程式碼如下：

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>
登入後複製

   

js部分程式碼：與bootstrap的Modal模態框結合使用時，會出現下拉列表出現在遮罩層的底層和點擊彈出框關閉按鈕但下拉列表並沒有消失的問題，找了半天原來問題出在select2.css這個樣式表中，

原因：點擊輸入框，此外掛程式會產生一個遮罩層(類名為.select2-drop-mask)和一個下拉列表(類名為.select2-drop)，這兩者的層疊性(z-index)依序為9991，9992，但是modal彈出框的層疊性大於10000，所以才會導致出現上述兩個問題

解決辦法：如果將.select2-drop-mask和.select2-drop的z -index分別提高到19991、19992，下拉列表成功顯示在上面，但在打開了下拉列表的前提下點擊modal彈出框的關閉按鈕會先收回下拉框，再次點擊才能關閉彈出窗，用戶體驗不是很好；這裡可以嘗試提高關閉按鈕的z-index，前提一定要父元素不能是modal彈出框，否則其提高的z-index無效。

3.造成select2.js上述不適的主要原因在於.select2-drop的失去焦點是要點到select2-drop-mask上才能觸發，為改善這種機制，這裡推薦另一款基於jQuery的下拉搜尋框外掛程式magicsuggest（需同時引入magicsuggest.css和magicsuggest.js），html部分很簡單，直接是：

js部分程式碼如下：

$(&#39;.select2_test&#39;).select2({
 placeholder: "请选择所属选项",
 allowClear: true;
});
登入後複製


優點：不會出現層疊性衝突的問題；樣式美觀；允許多項選擇

缺點：多餘的樣式較多（陰影、高亮、錯誤提示、多選），需要根據具體需要調整樣式；不能直接透過$(this).val()來取得原始輸入框的值；資料量過大時載入會出現延遲

4.鑑於上面那個外掛預設的是多選的樣式，用到項目裡也不能直接取得