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