Enhanced Dropdown Select In Pure JavaScript – LC-select

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