下拉框（可輸入+自動匹配）

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

1.直接使用h5的新標簽<datalist>，對應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 均不支持 <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模態框結合使用時，會出現下拉列表出現在遮罩層的底層和點擊彈出框關閉按鈕但下拉列表並沒有消失的問題，找了半天原來問題出在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無效。

如果想更深入了解select2.js插件，可以參考http://www.cnblogs.com/liuxiaobo93/p/5112993.html

3.造成select2.js上述不適的主要原因在於.select2-drop的失去焦點是要點到select2-drop-mask上才能觸發，為改善這種機制，這里推薦另一款基於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']
}); 

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

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

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模態框結合使用時，會出現下拉列表顯示不出來， 同時.modal-body右側出現滾動條，原因就在於bootstrap給.modal-body設置了一個overflow-y:auto的默認樣式，所以解決辦法就是給.modal-body添加一個overflow-y:visible的樣式來覆蓋它。網上還有一些關於jquery-chosen的教程，推薦閱讀這篇博文http://www.cnblogs.com/pshay/archive/2012/12/11/2813877.html

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