feliixx / select-multiple-big

blazing-fast dropdown selector with live search to handle very large datasets

select-multiple-big

a small JS plugin build on top of JQuery and bootstrap to create a dropdown selector with live search that can handle very large number of items with 0 display latency.

a live demo is available here ( with 100 000 items) : live demo

How to use the plugin

first, add bootstrap and JQuery js and css :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

then add an HTML div element somewhere in the DOM like this :

<div id="select"></div>

finally, instantiate the dropdown with some js code :

$('#select').selectmultiple({
  text: 'items',                          // title when no items selected 
  data: [ "item1", "item2", "item3" ],    // an array of string containing the list of item to display in the dropdown
  width: 200,                             // the dropdown width
  placeholder: 'items'                    // text-search placeholder 
});

when the user select some items, a custom event is fired : multiple_select_change you can catch it by adding a listener like this :

$('#select').on('multiple_select_change', function() {
  // do some stuff 
});

Custom methods

get the number of selected items:

var count = $('#select').selectmultiple('count')
// count = 3

get the selected items:

var values =  $('#select').selectmultiple('value')
// values = [ "item1", "item11", "item111" ]

get all availables item in the dropdown:

var options = $('#select').selectmultiple('option')
// options = [ "item1", "item2", "item3", ... ]