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

1.直接使用h5的新標簽<datalist>，對應(yīng)demo如下：

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

優(yōu)點：節(jié)約js代碼；

缺點：IE 9及以下的IE瀏覽器 和 Safari 均不支持 <datalist> 標簽（好像還有幾個瀏覽器也不支持）；重復點擊輸入框或者下拉圖標并不能收回下拉列表；樣式難以控制

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部分代碼如下：

$('.select2_test').select2({
 placeholder: "請選擇所屬選項",
 allowClear: true;
}); 

注意：與bootstrap的Modal模態(tài)框結(jié)合使用時，會出現(xiàn)下拉列表出現(xiàn)在遮罩層的底層和點擊彈出框關(guān)閉按鈕但下拉列表并沒有消失的問題，找了半天原來問題出在select2.css這個樣式表中，

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

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

如果想更深入了解select2.js插件，可以參考http://www.dbjr.com.cn/article/95561.htm

3.造成select2.js上述不適的主要原因在于.select2-drop的失去焦點是要點到select2-drop-mask上才能觸發(fā)，為改善這種機制，這里推薦另一款基于jQuery的下拉搜索框插件magicsuggest（需要同時引入magicsuggest.css和magicsuggest.js），html部分很簡單，直接就是：

<div id="magicsuggest"></div>

js部分代碼如下：

$('#magicsuggest').magicSuggest({
　　placeholder:''，
　　allowFreeEntries: false,
　　maxSelection:1,
　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: ['Paris', 'New York', 'Gotham']
}); 

優(yōu)點：不會出現(xiàn)層疊性沖突的問題；樣式美觀；允許多項選擇

缺點：多余的樣式較多（陰影、高亮、錯誤提示、多選），需要根據(jù)具體需要調(diào)整樣式；不能直接通過$(this).val()來獲取原輸入框的值；數(shù)據(jù)量過大時加載會出現(xiàn)延遲

4.鑒于上面那個插件默認的是多選的樣式，用到項目里也不能直接獲取<select>標簽里的值，這里我個人推薦chosen這款插件（需要同時引入chosen.css和chosen.js），html部分代碼如下：

<select data-placeholder="Type 'C' to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select> 

 js部分代碼如下：

var config = {
　　'.chosen-select':{},
　　'.chosen-select-deselect':{allow_single_deselect:true},
　　'.chosen-select-no-single':{disable_search_threshold:10},
　　'.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
　　'.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
　　$(selector).chosen(config[selector]);
} 

注意：如果與bootstrap的Modal模態(tài)框結(jié)合使用時，會出現(xiàn)下拉列表顯示不出來， 同時.modal-body右側(cè)出現(xiàn)滾動條，原因就在于bootstrap給.modal-body設(shè)置了一個overflow-y:auto的默認樣式，所以解決辦法就是給.modal-body添加一個overflow-y:visible的樣式來覆蓋它。

5.當然，實現(xiàn)相同功能的jQuery插件還有很多，具體可以參考http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html

如果大家還想深入學習，可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論