A JavaScript Dropdown Menu Plugin with Virtual Scrolling

Virtual Select is to replace the high-performance material design style checkbox that supports single/multiple selections, virtual scrolling, live search, and dynamic data rendering.

How to make use of it:

1. Load the Virtual Select’s JavaScript and CSS information within the HTML doc.

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

2. Create a container to carry the digital choice.

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

3. Define your individual choices for digital choice.

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 executed it.

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

4. Enable the multi choose help.

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

5. Enable the staying search for help.

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

. Customize the placeholder text.

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

7. Define an array of disabled choices.

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

8. Determine whether or not to cover the clear button.

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

9. More configuration choices.

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 strategies.

// 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-

High-Performance Select Box, Virtual Select Plugin/Github


See Demo And Download

Official Website(sa-si-dev): Click Here

This superior jQuery/javascript plugin is developed by sa-si-dev. For extra Advanced Usage, please go to the official website.

Share