multiselect

HTML

<link rel="stylesheet" href="https://loudev.com/css/multi-select.css">
<script src="https://loudev.com/js/jquery.js"></script>
<script src="https://loudev.com/js/jquery.multi-select.js"></script>
<script src="https://loudev.com/js/jquery.quicksearch.js"></script>
<select multiple="multiple" id="public-methods" name="public-methods[]">
          <option value="elem_1">elem 1</option>
          <option value="elem_2">elem 2</option>
          <option value="elem_3">elem 3</option>
          <option value="elem_4">elem 4</option>
          <option value="elem_5">elem 5</option>
          <option value="elem_6">elem 6</option>
          <option value="elem_7">elem 7</option>
          <option value="elem_8">elem 8</option>
          <option value="elem_9">elem 9</option>
          <option value="elem_10">elem 10</option>
          <option value="elem_11">elem 11</option>
          <option value="elem_12">elem 12</option>
          <option value="elem_13">elem 13</option>
          <option value="elem_14">elem 14</option>
          <option value="elem_15">elem 15</option>
          <option value="elem_16">elem 16</option>
          <option value="elem_17">elem 17</option>
          <option value="elem_18">elem 18</option>
          <option value="elem_19">elem 19</option>
          <option value="elem_20">elem 20</option>
          <option value="elem_21">elem 21</option>
          <option value="elem_22">elem 22</option>
          <option value="elem_23">elem 23</option>
          <option value="elem_24">elem 24</option>
          <option value="elem_25">elem 25</option>
          <option value="elem_26">elem 26</option>
          <option value="elem_27">elem 27</option>
          <option value="elem_28">elem 28</option>
          <option value="elem_29">elem 29</option>
          <option value="elem_30">elem 30</option>
          <option value="elem_31">elem 31</option>
          <option value="elem_32">elem 32</option>
          <option value="elem_33">elem...

JavaScript

$('#public-methods').multiSelect({
  selectableHeader: "<div><a href='#' id='select-all'>select all</a></div><input type='text' class='search-input form-control' autocomplete='off' placeholder='search' style='margin-bottom:5px'>",
  selectionHeader: "<div><a href='#' id='deselect-all'>deselect all</a></div><input type='text' class='search-input form-control' autocomplete='off' placeholder='search' style='margin-bottom:5px'>",
  afterInit: function(ms){
    var that = this,
        $selectableSearch = that.$selectableUl.prev(),
        $selectionSearch = that.$selectionUl.prev(),
        selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
        selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
    .on('keydown', function(e){
      if (e.which === 40){
        that.$selectableUl.focus();
        return false;
      }
    });

    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
    .on('keydown', function(e){
      if (e.which == 40){
        that.$selectionUl.focus();
        return false;
      }
    });
  },
  afterSelect: function(){
    this.qs1.cache();
    this.qs2.cache();
  },
  afterDeselect: function(){
    this.qs1.cache();
    this.qs2.cache();
  }
});




$('#select-all').on('click',function(){
  $('#public-methods').multiSelect('select_all');
  return false;
});
$('#deselect-all').on('click',function(){
  $('#public-methods').multiSelect('deselect_all');
  return false;
});