码迷,mamicode.com
首页 > Web开发 > 详细

实现多选和搜索过滤功能的jQuery下拉列表框插件

时间:2016-04-11 14:26:55      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。

在线预览    源码下载

 使用方法

使用该下拉类别框插件需要在页面中引入fm.selectator.jquery.css、jQuery和fm.selectator.jquery.js文件。

<link rel="stylesheet" href="fm.selectator.jquery.css"/>
<script src="jquery-1.11.0.min.js"></script>
<script src="fm.selectator.jquery.js"></script>        
 HTML结构

一个选项带图标级带分组选项的下拉列表的HTML结构如下:

<label for="select">
  Multi select with custom content:
</label>
<select id="select" name="select" multiple>
  <optgroup label="Group one" class="group_one">
    <option value="1" class="option_one" data-subtitle="Et" data-left="<img src=‘images/ingi.png‘>" data-right="1">One</option>
    <option value="2" class="option_two" data-subtitle="To" data-left="<img src=‘images/runa.png‘>" data-right="2">Two</option>
  </optgroup>
  <optgroup label="Group two" class="group_two">
    <option value="3" class="option_three" data-subtitle="Tre" data-left="<img src=‘images/jogvan.png‘>" data-right="3">Three</option>
    <option value="4" class="option_four" selected data-left="<img src=‘images/noimage.png‘>" data-right="4">Four</option>
    <option value="5" class="option_five" selected data-left="<img src=‘images/noimage.png‘>" data-right="5">Five</option>
    <option value="6" class="option_six">Six</option>
  </optgroup>
  <optgroup label="Group three" class="group_three">
    <option value="7" class="option_seven">Seven</option>
  </optgroup>
  <option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
  <option value="9" class="option_nine">Nine</option>
  <option value="10" class="option_ten" selected>Ten</option>
  <option value="11" class="option_eleven" selected>Eleven</option>
  <option value="12" class="option_twelve">Twelve</option>
  <option value="13" class="option_thirteen">Thirteen</option>
  <option value="14" class="option_fourteen">Fourteen</option>
</select>
<input value="activate selectator" id="activate_selectator4" type="button">  
 初始化插件

在页面DOM元素加载完毕之后,可以通过selectator()方法来初始化该下拉列表插件。

$(‘#selectBox‘).selectator();

 配置参数

$(‘#selectBox‘).selectator({
    prefix: ‘selectator_‘,             // CSS class prefix
    height: ‘auto‘,                    // auto or element
    useDimmer: false,                  // dims the screen when option list is visible
    useSearch: true,                   // if false, the search boxes are removed and 
                                       //   `showAllOptionsOnFocus` is forced to true
    keepOpen: false,                   // if true, then the dropdown will not close when 
                                       //   selecting options, but stay open until losing focus
    showAllOptionsOnFocus: false,      // shows all options if input box is empty
    selectFirstOptionOnSearch: true,   // selects the topmost option on every search
    searchCallback: function(value){}, // Callback function when enter is pressed and 
                                       //   no option is active in multi select box
    labels: {
        search: ‘Search...‘            // Placeholder text in search box in single select box
    }
});                

在线预览    源码下载

实现多选和搜索过滤功能的jQuery下拉列表框插件

标签:

原文地址:http://www.cnblogs.com/w2bc/p/5377915.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!