A Javascript Plugin for Dropdown with Virtual Scroll

A high-performance, Material Design style select box replacement that supports single/multiple select, virtual scrolling (for larger data lists), live search, and dynamic data rendering.

How to use it:

1. Load the Virtual Select’s JavaScript and CSS files in the HTML document.

<link rel="stylesheet" href="dist/virtual-select.min.css" />
<script src="dist/virtual-select.min.js"></script>

2. Create a container to hold the virtual select.

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

3. Define your own options for the virtual select.

myOptions = [
  { label: 'Options 1', value: '1' },
  { label: 'Options 2', value: '2' },
  { label: 'Options 3', value: '3' },
  ...
  { label: 'Options 100000', value: '100000' },
],

3. Initialize the Virtual Select library and done.

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions
});

4. Enable the multi select support.

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  multiple: true
});

5. Enable the live search support.

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  search: true
});

6. Customize the placeholder text.

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  placeholder: 'Select options here'
});

7. Define an array of disabled options.

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  disabledOptions: [1, 1000, 10000]
});

8. Determine whether to hide the clear button.

VirtualSelect.init({
  ele: '#example-select',
  options: myOptions,
  hideClearButton: true
});

9. More configuration options.

VirtualSelect.init({

  // No.of options to show on viewport
  Count: 5,

  // Height of option
  optionHeight: '40px',

  // top, bottom, auto
  position: 'auto',

  // Text to show when no options to show
  noOptionsText: 'No results found',

});

10. API methods.

// get selected value
$('#example-select').val();

// set value
document.querySelector('#example-select').setValue(value);

// reset the virtual select
document.querySelector('#example-select').reset();

// update options
document.querySelector('#example-select').setOptions(options);

// set disable options
document.querySelector('#example-select').setDisabledOptions(disabledOptions);

Download Details:

Author: sa-si-dev

Demo: https://sa-si-dev.github.io/virtual-select/#/

Source Code: https://github.com/sa-si-dev/virtual-select

#javascript