jQuery 下拉查詢篩選插件Combo Select

插件描述：Combo Select 是一款友好的 jQuery 下拉框插件，在 PC 瀏覽器上它能模擬一個簡單漂亮的下拉框，在 iPad 等移動設備上又能回退到原生樣式。Combo Select 可以對選項進行檢索過濾，同時支持鍵盤控制。

使用方法

一、引入文件

<link rel="stylesheet" href="css/combo.select.css">

<script src="js/jquery.min.js"></script>

<script src="js/jquery.combo.select.js"></script>

 

二、HTML

<div class="jq22">

    <select>

        <option value="">月份</option>

        <option value="一月">一月</option>

        <option value="二月">二月</option>

        <option value="三月">三月</option>

        ...

    </select>

</div>

 

三、JavaScript

$(function() {

    $('select').comboSelect();

});

 

配置

屬性/方法	類型	默認值	說明
comboClass	字符串	combo-select	外部控制器的 class
comboArrowClass	字符串	combo-select-arrow	箭頭的 class
comboDropDownClass	字符串	combo-drop-down	下拉展開後箭頭的 class
inputClass	字符串	combobox-input text-input	輸入框的 class
disabledClass	字符串	option-disabled	禁用選項的 class
hoverClass	字符串	option-hover	鼠標通過的 class
selectedClass	字符串	option-selected	被選中項的 class
markerClass	字符串	combo-marker	匹配搜索的 class
maxHeight	整數	200	最大高度
themeClass	字符串	空	使用外部主題
extendStyle	布爾值	true	true

生成後的下拉框的 HTML 以下：

1 2 3 4 5 6 7 8

<div class="combo-select">     <select name="month" tabindex="-1"></select>     <div class="combo-select-arrow"></div>     <ul class="combo-drop-down">         <li>....</li>     </ul>     <input type="text" placeholder="請選擇" class="combobox-input text-input"> </div>