High Performance Select Box JavaScript Library – Virtual Select

Category: Form , Javascript | August 20, 2021
Views Total:684 views
Official Page:Go to website
Last Update:August 20, 2021


High Performance Select Box JavaScript Library – Virtual Select


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', alias: 'custom label for search' },
  { label: 'Options 2', value: '2', description: 'custom description for label'},
  { label: 'Options 3', value: '3' },
  { label: 'Options 100000', value: '100000' },

3. Initialize the Virtual Select library and done.

  ele: '#example-select',
  options: myOptions

4. Enable the multi select support.

  ele: '#example-select',
  options: myOptions,
  multiple: true

5. Enable the live search support.

  ele: '#example-select',
  options: myOptions,
  search: true

6. Customize the placeholder text.

  ele: '#example-select',
  options: myOptions,
  placeholder: 'Select options here'

7. Define an array of disabled options.

  ele: '#example-select',
  options: myOptions,
  disabledOptions: [1, 1000, 10000]

8. Determine whether to hide the clear button.

  ele: '#example-select',
  options: myOptions,
  hideClearButton: true

9. More configuration options.


  // parent element to render dropbox. (self, body, or any css selectror)
  dropboxWrapper: 'self',

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

  // if has options descriptions
  hasOptionDescription: false,

  // disable select all
  disableSelectAll: false,

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

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

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

  // Text to show when no results on search
  noSearchResultsTex: 'No results found',

  // Text to show near select all checkbox when search is disabled
  selectAllText: 'Select all',

  // Text to show as placeholder for search input
  searchPlaceholderText: 'Search...', 

  // Text to use when displaying no.of values selected text (i.e. 3 options selected)
  optionsSelectedText: 'options selected',

  // Text to use when displaying no.of values selected text and only one value is selected (i.e. 1 option selected)
  optionSelectedText: 'option selected',

  // Text to use when displaying all values selected text (i.e. All (10))
  allOptionsSelectedText: 'All',
  // By default, when all values selected "All (10)" value text would be shown. Set true to show value text as "10 options selected".
  disableAllOptionsSelectedText: false,

  // By default, no.of options selected text would be shown when there is no enough space to show all selected values. Set true to override this.
  alwaysShowSelectedOptionsCount: false,

  // Show each selected values as tags with remove icon
  showValueAsTags: false,

  // allows you to add new options
  allowNewOption: true,

  // select first option by default on load
  autoSelectFirstOption: false,

  // Single value or array of values to select on init
  selectedValue: '',

  // To avoid "change event" trigger on setting initial value
  silentInitialValueSet: false,

  // Custom width
  dropboxWidth: null,

  // CSS z-index
  zIndex: 1,

  // additional CSS classes
  additionalClasses: '',

  // Maximum no.of values to show in the tooltip for multi-select
  noOfDisplayValues: 50,

  // Mark matched term in label
  markSearchResults: false,

  // Font size for tooltip
  tooltipFontSize: '14px',

  // CSS Text alignment for tooltip
  tooltipAlignment: 'center',

  // max width of tooltip
  tooltipMaxWidth: '300px',

  // Show selected options at the top of the dropbox
  showSelectedOptionsFirst: false,

  // Tooltip text for clear button
  clearButtonText: 'clear',

  // Text to show when more than noOfDisplayValues options selected (i.e + 10 more...)
  moreText: 'more...',

  // name attribute for hidden input
  name: '',

  // keep dropbox always open with fixed height
  keepAlwaysOpen: false,

  // maximum number of options allowed to select
  maxValue: 0,

  // show dropbox as popup on small screen like mobile
  showDropboxAsPopup: true,

  // maximum screen width that allowed to show dropbox as popup
  popupDropboxBreakpoint: '576px',

  // hide value tooltip if all options selected
  hideValueTooltipOnSelectAll: true,

  // Callback function to integrate server search
  onServerSearch: function(){},	

  // Callback function to render label, which could be used to add image, icon, or custom content
  labelRenderer: function(){},	

  // show options to select only if search value is not empty
  showOptionsOnlyOnSearch: false,

  // Select only visible options on clicking select all checkbox when options filtered by search
  showOptionsOnlyOnSearch: false,

10. You are also allowed to pass options via HTML data attributes:

  • ‘multiple’: ‘multiple’,
  • ‘placeholder’: ‘placeholder’
  • ‘data-label-key’: ‘labelKey’
  • ‘data-value-key’: ‘valueKey’
  • ‘data-alias-key’: ‘aliasKey’
  • ‘data-search’: ‘search’
  • ‘data-hide-clear-button’: ‘hideClearButton’
  • ‘data-auto-select-first-option’: ‘autoSelectFirstOption’
  • ‘data-has-option-description’: ‘hasOptionDescription’
  • ‘data-options-count’: ‘optionsCount’
  • ‘data-option-height’: ‘optionHeight’
  • ‘data-position’: ‘position’
  • ‘data-no-options-text’: ‘noOptionsText’
  • ‘data-no-search-results-text’: ‘noSearchResultsText’
  • ‘data-silent-initial-value-set’: ‘silentInitialValueSet’
  • ‘data-dropbox-width’: ‘dropboxWidth’
  • ‘data-z-index’: ‘zIndex’
  • ‘data-no-of-display-values’: ‘noOfDisplayValues’
  • ‘data-allow-new-option’: ‘allowNewOption’
  • ‘data-mark-search-results’: ‘markSearchResults’
  • ‘data-tooltip-font-size’: ‘tooltipFontSize’
  • ‘data-tooltip-alignment’: ‘tooltipAlignment’
  • ‘data-tooltip-max-width’: ‘tooltipMaxWidth’
  • ‘data-show-selected-options-first’: ‘showSelectedOptionsFirst’
  • ‘data-hidden-input-name’: ‘hiddenInputName’
  • ‘data-disable-select-all’: ‘disableSelectAll’
  • ‘data-keep-always-open’: ‘keepAlwaysOpen’
  • ‘data-max-values’: ‘maxValues’
  • ‘data-additional-classes’: ‘additionalClasses’
  • ‘data-show-dropbox-as-popup’: ‘showDropboxAsPopup’
  • ‘data-popup-dropbox-breakpoint’: ‘popupDropboxBreakpoint’
  • ‘data-hide-value-tooltip-on-select-all’: ‘hideValueTooltipOnSelectAll’,
  • ‘data-show-options-only-on-search’: ‘showOptionsOnlyOnSearch’,
  • ‘data-select-all-only-visible’: ‘selectAllOnlyVisible’,
<div id="sample-select"
     placeholder="Select country"

11. API methods.

// get selected value
// or

// set value

// reset the virtual select

// open

// close

// update options

// set disable options

// select / deselect all options

// check if all options are selected

// add options
  // options here

// get selected value

// get selected option's display value

// get selected option's details

// destroy the instance
// get selected option's details

12. Trigger a function every time you change the option.

document.querySelector('#example-select').addEventListener('change', function() {

13. Trigger functions before/after open/close/reset.

document.querySelector('#example-select').addEventListener('beforeOpen', function() {
  // do something

document.querySelector('#example-select').addEventListener('beforeClose', function() {
  // do something

document.querySelector('#example-select').addEventListener('afterOpen', function() {
  // do something

document.querySelector('#example-select').addEventListener('afterClose', function() {
  // do something

document.querySelector('#example-select').addEventListener('reset', function() {
  // do something


v1.0.16 (08/20/2021)

  • Bug fixes

v1.0.15 (08/16/2021)

  • Bug fixes
  • Added css for .vscomp-ele[disabled]
  • Added more properties
  • Added destroy() metho

v1.0.14 (08/07/2021)

  • Bug fixes
  • Added new properties

v1.0.12 (07/12/2021)

  • New property: optionsSelectedText
  • New event: reset

v1.0.11 (06/07/2021)

  • Added labelRenderer callback

v1.0.10 (05/01/2021)

  • New property: selectAllOnlyVisible
  • New events

v1.0.9 (04/17/2021)

  • Bug fixes
  • New property clearButtonText
  • New property getSelectedOptions

v1.0.8 (03/13/2021)

  • Bug fixes
  • New property: showOptionsOnlyOnSearch

v1.0.7 (03/06/2021)

  • Bug fixes
  • New properties

v1.0.6 (02/27/2021)

  • Bug fixes
  • Changed arrow icon
  • New properties / features

v1.0.5 (02/20/2021)

  • Renamed the property “hiddenInputName” to “name”
  • Enabled showSelectedOptionsFirst feature for optGroup
  • Option description as second line text for label
  • New methods

v1.0.4 (02/15/2021)

  • Bug fixes
  • New properties, features, and methods

v1.0.3 (02/06/2021)

  • Bug fixes
  • Added New properties
  • Added New methods
  • Added Option group support
  • Show selected options first
  • Use alias for searching

v1.0.2 (02/01/2021)

  • Bug fixes
  • Property to define no.of values to show in tooltip
  • Allow to add new option
  • Getting properties from element attribute


  • Bugfix

You Might Be Interested In:

3 thoughts on “High Performance Select Box JavaScript Library – Virtual Select

  1. Hozefa

    How to use it in a form like contact form 7, can we use it as select field ? how the field in the form will get the value we choose with this field ?


  2. Yuma

    I have called the API and poured date data into the selectbox, how can the default filter tick on current date when the page loads?


Leave a Reply