jQuery支键盘控制和选项搜索的下拉列表框插件-灵象搜搜资源网

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

发布2020-11-08 浏览828次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

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>