jQuery支键盘控制和选项搜索的下拉列表框插件

combo-select是一款jQuery支键盘控制和列表选项搜索的下拉列表框jQuery插件。该下拉列表框插件支持键盘控制，支持在列表选项中进行搜索过滤。在移动数据和平板电脑上会回退为原生的select列表框。它的特点有：

• 可以对下拉列表选项进行搜索过滤。
• 对移动手机和平板电脑友好（回退为原生select下拉框）
• 可以使用键盘来控制
• 样式可以完全自定义
• 支持dada属性
• 支持数字和字符串两种数据类型
• 支持隐含的style属性

使用方法

HTML结构

使用普通的下拉列表框结构即可：

<select data-theme="bootstrap">
    <option value="">Select value</option>
    <option>1</option>
    <option>2</option>
</select>                
              

初始化插件

$('select').comboSelect({
    comboClass         : 'combo-select', /* outer container class */
    comboArrowClass    : 'combo-select-arrow', /* arrow class */
    comboDropDownClass : 'combo-drop-down', /* dropdown class */
    inputClass         : 'combobox-input text-input', /* Input element class */
    disabledClass      : 'option-disabled', /* Disabled class */
    hoverClass         : 'option-hover', /* dropdown list hover class */
    selectedClass      : 'option-selected', /* dropdown list selected class */
    markerClass        : 'combo-marker', /* Search marker class */
    maxHeight          : 200, /* Max height of dropdown */
    themeClass         : '', /* Theme using external classes */
    extendStyle        : true /* Copy all inline styles from original select */
})                
              

普通的select下拉框进过转换后得到下面的HTML代码：

<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="Select Month" class="combobox-input text-input">
</div>                
              

配置参数

• comboClass：包裹容器的class名称。
• comboArrowClass：下拉框箭头的class名称。
• comboDropDownClass：下拉列表的class名称。
• inputClass：input元素的class名称。
• disabledClass：禁用状态时的class名称。
• hoverClass：鼠标滑过时的class名称。
• selectedClass：被选择的下拉列表的class名称。
• markerClass：搜索标签的class名称。
• maxHeight：下拉列表的最大高度。
• themeClass：使用外部主题的class名称。
• extendStyle：是否从原生select下拉列表框中复制所有的内联样式。

浏览器兼容

• Internet Explorer IE 8+
• Chrome
• Firefox
• Opera
• Safari
• iOS
• Android
• IE Mobile