THEMETRIAL

High Performance Select Box JavaScript Library – Virtual Select

Author:sa-si-dev
Views Total:0 views
Official Page:Go to website
Last Update:January 12, 2021
License:MIT

Preview:

High Performance Select Box JavaScript Library – Virtual Select

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="https://www.cssscript.com/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);


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.