| Author: | LCweb-ita |
|---|---|
| Views Total: | 3,987 views |
| Official Page: | Go to website |
| Last Update: | June 27, 2025 |
| License: | MIT |
Preview:
Description:
LC-select is a dependency-free JavaScript library designed to enhance the native select element with advanced features like custom images, live search, and much more.
More Features:
- Dark & Light themes.
- Select multiple options just like a tag input.
- Responsive and mobile friendly.
How to use it:
1. Download and include the LC-select’s files on the page.
2. Just initialize the plugin on your existing select element and done.
new lc_select(document.querySelector('select'), {
// options here
});
3. Add custom images to options using the data-image attribute.
4. Customize the placeholder for the select.
5. Determine whether to enable the live search functionality. Default: true.
new lc_select(document.querySelector('select'), {
enable_search : true,
min_for_search : 7, // 7 results to show
});
6. Determine the maximum number of options allowed to select in a multi select.
new lc_select(document.querySelector('select'), {
max_opts: 6
});
7. More default configs.
new lc_select(document.querySelector('select'), {
// defines the wrapper width
wrap_width: 'auto',
// additional CSS classes
addit_classes: [],
// prepend an empty option using placeholder text
pre_placeh_opt : false,
// custom labels
labels: [
'search options',
'add options',
'Select options ..',
'.. no matching options ..',
],
// callback function
on_change: function(new_value, target_field) {
// do something
}
});
8. API methods.
// re-sync
const resyncEvent = new Event('lc-select-refresh');
select.dispatchEvent(resyncEvent);
// destroy
const destroyEvent = new Event('lc-select-destroy');
select.dispatchEvent(destroyEvent);
Changelog:
v1.2.0 (06/27/2025)
- HTML accessibility improvements
- better CSS managing multiple choices rendering
v1.1.11 (06/25/2025)
- Improved HTML structure acessibility
v1.1.10 (03/04/2025)
- fixed: javascript error occurring when “lc-select-refresh” event is fired on an hidden dropdown
v1.1.9 (03/01/2025)
- added: attribute reporting the select name in a dropdown attribute
v1.1.8 (06/06/2023)
- new: improved “inherit” width, considering dropdown paddings and images
v1.1.7 (10/18/2022)
v1.1.6 (06/15/2022)
- added “padding: 0” to dropdown list to avoid interferences
v1.1.5 (09/21/2021)
- placeholder text safely escaped before usage
v1.1.4 (06/30/2021)
- fixed: options automatically sorted alphabetically
- fixed: page scroll when dropdown scroll reached the end
v1.1.3 (03/18/2021)
- “change” event now bubbles for better (jQuery) compatibility
