https://github.com/feliixx/select-multiple-big

blazing-fast dropdown selector with live search to handle very large datasets
https://github.com/feliixx/select-multiple-big

bootstrap dropdown fast jquery jquery-plugin searchbar

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/feliixx/select-multiple-big
• Owner: feliixx
• License: unlicense
• Created: 2017-06-06T11:35:07.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-08T09:52:34.000Z (over 7 years ago)
• Last Synced: 2024-05-10T16:32:05.256Z (4 months ago)
• Topics: bootstrap, dropdown, fast, jquery, jquery-plugin, searchbar
• Language: JavaScript
• Size: 10.7 KB
• Stars: 2
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-blazingly-fast - select-multiple-big - blazing-fast dropdown selector with live search to handle very large datasets (JavaScript)

README

        
# 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](https://codepen.io/adrienpetel/full/ZOorkZ/)

# How to use the plugin

first, add bootstrap and JQuery js and css : 

```html

...

```

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

```html



``` 

finally, instantiate the dropdown with some js code : 


```javascript

$('#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 : 

```javascript

$('#select').on('multiple_select_change', function() {

  // do some stuff 

});

```

# Custom methods

get the number of selected items: 

```javascript

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

// count = 3

```

get the selected items: 

```javascript

var values =  $('#select').selectmultiple('value')

// values = [ "item1", "item11", "item111" ]

```

get all availables item in the dropdown: 

```javascript

var options = $('#select').selectmultiple('option')

// options = [ "item1", "item2", "item3", ... ]

```