Author: | sa-si-dev |
---|---|
Views Total: | 50 views |
Official Page: | Go to website |
Last Update: | January 23, 2021 |
License: | MIT |
Preview:

Description:
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);
Changelog:
01/23/2021
- Bugfix