pqSelect是一个jQuery插件，可用于将常规的＜select＞元素转换为可定制的高性能下拉选择小部件。

单击选项、复选框（多选）或单选按钮（单选）后，用户可以从下拉列表中的单个或多个选项中进行选择。

该小部件是基于jQuery UI设计的，这意味着它可以完全自定义主题，并易于与Bootstrap框架集成。

该插件最棒的部分是它支持虚拟渲染，即使用户处于低带宽或慢速连接时，该插件也能顺利渲染和运行。

更多功能：

• 选择全部按钮。
• 实时搜索。
• 支持选项组。
• 键盘可访问性。
• 窗口关闭时自动关闭并滚动。
• 将所选选项显示为标记/令牌。
• 碰撞/边缘检测。
• 允许您设置要显示的最大选项数。

如何使用它:

1.在文档中加载必要的jQuery库和jQuery UI。

<!-- jQuery UI Theme -->
<link rel="stylesheet" href="/path/to/cdn/jquery-ui.css">

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery UI -->
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2.加载jQuery pqSelect插件的文件。

<link rel="stylesheet" href="pqselect.min.css" />    
<script src="pqselect.min.js"></script>

3.调用函数pq选择在现有的select元素上，插件将处理其余部分。

<select id="select-demo" multiple>
  <optgroup label="Brazil">
    <option>RJ</option>
    <option>SP</option>
  </optgroup>
  <optgroup label="Canada">
    <option>BC</option>
    <option>Québec</option>
  </optgroup>
  <optgroup label="Ireland">
    <option>Co. Cork</option>
  </optgroup>
  <optgroup label="UK">
    <option>Essex</option>
    <option>Isle of Wight</option>
  </optgroup>
  <optgroup label="USA">
    <option>AK</option>
    <option>CA</option>
    <option>ID</option>
    <option>MT</option>
    <option>NM</option>
    <option>OR</option>
    <option>WA</option>
    <option>WY</option>
  </optgroup>
  <optgroup label="Venezuela">
    <option>DF</option>
    <option>Lara</option>
    <option>Nueva Esparta</option>
    <option>Táchira</option>
  </optgroup>
</select>

$(function() {
  $("#select-demo").pqSelect({
    // options
  })
});

4.将复选框（用于多选）或单选按钮（用于单选）添加到选项中。推荐。

$(function() {
  $("#select-demo").pqSelect({
    // options
  })
});

5.更多具有默认值的配置选项。

$(function() {
  $("#select-demo").pqSelect({
    singlePlaceholder: 'Select an option',
    displayText: '{0} of {1} selected',
    maxDisplay: 4,
    maxHeight: 300,
    // max number of options allowed to select
    maxSelect: 0,
    multiplePlaceholder: 'Select options',
    selectallText: 'Select All',
    closeOnWindowScroll: true,
    closeOnWindowResize: true,
    itemCls: 'pq-select-item ui-corner-all ui-state-default',
    // for Bootstrap
    bootstrap: {
      on: false,
      btn: 'btn btn-default',
      popupCont: 'panel panel-default',
      selectCls: 'label label-info',
      itemCls: 'label label-default',
      closeIcon: 'glyphicon glyphicon-remove',
      searchIcon: 'glyphicon glyphicon-search',
      hoverCls: ''
    },
    position: {
      my: 'left top',
      at: 'left bottom',
      collision: 'flipfit'
    },
    kcOpen: [KC.DOWN, KC.ENTER, KC.UP],
    deselect: true,
    hoverCls: 'pq-state-hover',
    // jQueryUI resizable opitons
    optionsResizable: {
      handles: 'e,s'
    },
    search: true,
    // or 'begin'
    searchRule: 'contain',
    _selectCls: 'pq-state-select',
    selectCls: 'ui-state-highlight',
    width: null,
    rowHt: 25,
    maxSelectReach: null,
    maxSelectExceed: null
  })
});

6.API方法。

// close
$("#select-demo").pqSelect( "close" );           

// destroy
$("#select-demo").pqSelect( "destroy" );

// disable
$("#select-demo").pqSelect( "disable" );

// enable
$("#select-demo").pqSelect( "enable" );

// get instance
var select = $("#select-demo").pqSelect( "getInstance" ).select; 
             
// check if is open
$("#select-demo").pqSelect( "isOpen" );           

// get options
var options = $("#select-demo").pqSelect( "option" );

// get values from option
var disabled = $("#select-demo").pqSelect( "option", "disabled" );

// set option
$("#select-demo").pqSelect( "option", "disabled", true );

// set options
$("#select-demo").pqSelect( "option", {disabled: true} );

// refresh
$("#select-demo").pqSelect( "refresh" );

// reload data
$("#select-demo").pqSelect( "refreshData" );

// get widget
var widget = $("#select-demo").pqSelect( "widget" );

7.事件。

$("#select-demo").on("pqselectcreate", function(event, ui){
  // do something
});

$("#select-demo").on("pqselectmaxselectreach", function(event, ui){
  // do something
});

$("#select-demo").on("pqselectmaxselectexceed", function(event, ui){
  // do something
});

预览截图

高性能单/多选插件 jQuery pqSelect