Author: | sa-si-dev |
---|---|
Views Total: | 961 views |
Official Page: | Go to website |
Last Update: | August 23, 2023 |
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', alias: 'custom label for search', classNames: 'customClassNames', }, { label: 'Options 2', value: '2', description: 'custom description for label', customData: '' }, { label: 'Options 3', value: '3' }, ... { label: 'Options 100000', value: '100000' }, ],
4. Initialize the Virtual Select library and done.
VirtualSelect.init({ ele: '#example-select', options: myOptions });
5. You can also directly initialize the library on the native select element.
<select multiple name="native-select" placeholder="Native Select" data-search="false" data-silent-initial-value-set="true"> <option value="1" disabled>Option 1</option> <option value="2">Option 2</option> <option value="3" selected>Option 3</option> ... </select>
VirtualSelect.init({ ele: 'select' });
6. Enable the multi select support.
VirtualSelect.init({ ele: '#example-select', options: myOptions, multiple: true });
7. Enable the live search support.
VirtualSelect.init({ ele: '#example-select', options: myOptions, search: true, searchGroup: false, // Include group title for searching searchByStartsWith: false, // Search options by startsWith() method });
8. Customize the placeholder text.
VirtualSelect.init({ ele: '#example-select', options: myOptions, placeholder: 'Select options here' });
9. Define an array of disabled options.
VirtualSelect.init({ ele: '#example-select', options: myOptions, disabledOptions: [1, 1000, 10000] });
10. Determine whether to hide the clear button.
VirtualSelect.init({ ele: '#example-select', options: myOptions, hideClearButton: true });
11. More configuration options.
VirtualSelect.init({ // 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', // allow searching by label ignoring diacritics searchNormalize: false, // disable dropdown disabled: false, // enable required validation. required: false, // disable required validation disableValidation: false, // use Group's value useGroupValue: false, // autofocus dropdown on load autofocus: false, // 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, // By default, no.of options selected text would be shown when there is no enough space to show all selected values. // Set true to show labels even though there is no enough space. alwaysShowSelectedOptionsLabel: false, // Show each selected values as tags with remove icon showValueAsTags: false, // For right-to-left text direction languages textDirection: 'ltr', // Disable option group title checkbox disableOptionGroupCheckbox: false, // Set true to replace HTML tags from option's text (value and label) to prevent XSS attack. // This feature is not enabled by default to avoid performance issue. enableSecureText: false, // Set value for hidden input in array format (e.g. '["1", "2"]') setValueAsArray: false, // Empty value to use for hidden input when no value is selected (e.g. 'null' or '[]' or 'none') emptyValue: '', // 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, // Scroll selected option to viewport on dropbox open focusSelectedOptionOnOpen: 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 maxValues: 0, // minimum no.of options should be selected to succeed required validation minValues: 0, // show dropbox as popup on small screen like mobile showDropboxAsPopup: true, // maximum screen width that allowed to show dropbox as popup popupDropboxBreakpoint: '576px', // left, center, or right popupPosition: 'center', // 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(){}, // Delay time in milliseconds to trigger onServerSearch callback function searchDelay: 300, // ID of the label element to use as a11y attribute aria-labelledby ariaLabelledby: '', // enhance accessibility when focusing on the dropdown wrapper making it more verbose ariaLabelText: 'Options list', // enhance accessibility when using the search functionality on the dropdowns searchFormLabel: 'Search', // 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, // Maximum width maxWidth: '250px', // throttle time for updating dropbox position on scroll event updatePositionThrottle: 100, });
12. 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-min-values’: ‘minValues’
- ‘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" multiple placeholder="Select country" data-value-key="id" data-search="true" ></div>
13. API methods.
// get selected value $('#example-select').val(); // or document.querySelector('#example-select').value; // set value document.querySelector('#example-select').setValue(value); // reset the virtual select document.querySelector('#example-select').reset(); // open document.querySelector('#exmple-select').open(); // close document.querySelector('#example-select').close(); // focus document.querySelector('#example-select').focus(); // enable document.querySelector('#example-select').enable(); // disable document.querySelector('#example-select').disable(options); // set enabled options document.querySelector('#example-select').setDisabledOptions(disabledOptions, keepValue); // set disabled options document.querySelector('#sample-select').setEnabledOptions(enabledOptions); // enable all option document.querySelector('#sample-select').setEnabledOptions(true); // select / deselect all options document.querySelector('#example-select').toggleSelectAll(true/false); // check if all options are selected document.querySelector('#example-select').isAllSelected(); // add options document.querySelector('#example-select').addOption({ // options here }); // validate required field document.querySelector('#sample-select').validate(); // or VirtualSelect.validate(document.querySelector('#myForm')); // update required value document.querySelector('#sample-select').toggleRequired(true); // get selected value document.querySelector('#example-select').getNewValue(); // get selected option's display value document.querySelector('#example-select').getDisplayValue(); // get selected option's details document.querySelector('#example-select').getSelectedOptions(); // Get disabled option's details document.querySelector('#example-select').getDisabledOptions(); // destroy the instance // get selected option's details document.querySelector('#example-select').destroy();
14. Trigger a function every time you change the option.
document.querySelector('#example-select').addEventListener('change', function() { console.log(this.value); });
15. 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 });
Changelog:
v1.0.40 (08/23/2023)
- Bugfix
v1.0.39 (06/18/2023)
- Update
- Bugfix
v1.0.38 (05/29/2023)
- Added New property searchNormalize: false that will allow searching by label ignoring diacritics in order to allow things like searching for ‘Goncalo’ and finding ‘Gonçalo’ or searching for ‘Pole’ and finding ‘Pôle’.
- Added New property searchFormLabel: ‘Search’ that will the used to enhance accessibility when using the search functionality on the dropdowns
- Added New property ariaLabelText: ‘Options list’ that will the used to enhance accessibility when focusing on the dropdown wrapper making it more verbose
- Bugfixed
v1.0.37 (01/01/2023)
- Added New property focusSelectedOptionOnOpen
- Bugfix
v1.0.36 (12/04/2022)
- Added – New property alwaysShowSelectedOptionsLabel
- Added – New method getDisabledOptions()
- Changed – Improved selectAllOnlyVisible feature
v1.0.35 (11/21/2022)
- Bugfix
- New property searchDelay to debounceonServerSearch callback
v1.0.34 (10/31/2022)
- Bugfix
v1.0.33 (09/25/2022)
- Added: Clearing search value on selecting option in single select only
v1.0.32 (09/25/2022)
- Added minValues – Minimum no.of options should be selected to succeed required validation
- Added setEnabledOptions()
- Added options[].classNames – Additional class names to customize specific option
- Bugfixes
v1.0.31 (07/18/2022)
- New property updatePositionThrottle
- Bugfix
v1.0.30 (06/19/2022)
- New property searchByStartsWith
v1.0.29 (04/24/2022)
- Bugfixes
v1.0.28 (04/17/2022)
- Bugfixes
- Added new properties
v1.0.27 (03/24/2022)
- Bugfixes
v1.0.26 (02/21/2022)
- Bugfixes
- Added new properties
v1.0.25 (02/13/2022)
- Implemented accessibility feature
- Added new properties
v1.0.24 (01/09/2022)
- Bug fixes
- Added New properties
- Added New methods
v1.0.23 (01/02/2022)
- Bug fixes
v1.0.22 (12/26/2021)
- Bug fixes
- New properties
- Allows to initialize plugin from the native select element
v1.0.21 (12/19/2021)
- Bug fixes
- New methods
v1.0.20 (12/05/2021)
- Bug fixes
v1.0.19 (11/14/2021)
- Bug fixes
- New properties
- New method: focus()
v1.0.18 (10/16/2021)
- Bug fixes
- We can use Shift + Click to select the options between the current option and the previously selected option
v1.0.17 (10/12/2021)
- New properties
- New argument keepValue in setDisabledOptions(disabledOptions, keepValue)
- Bugfixes
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
01/23/2021
- Bugfix
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 ?
Thanks
can we use this on a react native project??
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?