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

1.直接使用h5的新標(biāo)簽<datalist>，對(duì)應(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)點(diǎn)：節(jié)約js代碼；

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

2.使用基于jQuery的select2插件（需要同時(shí)引入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: "請(qǐng)選擇所屬選項(xiàng)",
 allowClear: true;
}); 

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

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

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

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

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

<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)點(diǎn)：不會(huì)出現(xiàn)層疊性沖突的問(wèn)題；樣式美觀；允許多項(xiàng)選擇

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

4.鑒于上面那個(gè)插件默認(rèn)的是多選的樣式，用到項(xiàng)目里也不能直接獲取<select>標(biāo)簽里的值，這里我個(gè)人推薦chosen這款插件（需要同時(shí)引入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é)合使用時(shí)，會(huì)出現(xiàn)下拉列表顯示不出來(lái)， 同時(shí).modal-body右側(cè)出現(xiàn)滾動(dòng)條，原因就在于bootstrap給.modal-body設(shè)置了一個(gè)overflow-y:auto的默認(rèn)樣式，所以解決辦法就是給.modal-body添加一個(gè)overflow-y:visible的樣式來(lái)覆蓋它。

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

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論