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

使用方法

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

HTML结构

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

  Multi select with custom content:


  
    One
    Two
  
  
    Three
    Four
    Five
    Six
  
  
    Seven
  
  Eight
  Nine
  Ten
  Eleven
  Twelve
  Thirteen
  Fourteen

    
                

初始化插件

在页面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
    }
});                  
                
                
 其它可用的属性标签
                
通过使用data-left、data-right和data-subtitle标签你可以扩展下拉列表的显示信息。它们可以通过CSS来设置样式，CSS的前缀为：prefix_title、prefix_left、prefix_right和prefix_subtitle。这些数据都是纯HTML代码，所以你也可以使用图片代码。
                

    
    This is the title
    
    This is the title
                  
                

上的代码会显示为类似下面的结构：

CSS类

方法

$('#selectBox').selectator('refresh');
$('#selectBox').selectator('destroy');                  
                

jquery.selectator-custom下拉列表插件的github地址为：https://github.com/Lepshey/jquery.selectator-custom