Author: | LCweb-ita |
---|---|
Views Total: | 342 views |
Official Page: | Go to website |
Last Update: | June 6, 2023 |
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.
<!-- Light Theme --> <link href="themes/light.css" rel="stylesheet" /> <!-- OR Dark Theme --> <link href="themes/dark.css" rel="stylesheet" /> <!-- Core JavaScript --> <script src="lc_select.js"></script>
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.
<select name="simple"> <optgroup label="javascript" data-image="js.svg"> <option value="vue" data-image="vue.svg">Vue.js</option> <option value="react" data-image="react.png">React</option> <option value="angular" data-image="angular.png">Angular</option> </optgroup> ... </select>
4. Customize the placeholder for the select.
<select ata-placeholder="Select A Language..."> <optgroup label="javascript" data-image="js.svg"> <option value="vue" data-image="vue.svg">Vue.js</option> <option value="react" data-image="react.png">React</option> <option value="angular" data-image="angular.png">Angular</option> </optgroup> ... </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.1.8 (06/06/2023)
- new: improved “inherit” width, considering dropdown paddings and images
v1.1.7 (10/18/2022)
- bugfix
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