Superlight Vanilla JS Dropdowns

Superlight Vanilla javascript plugin, for modern dropdown web menus. Support multiple options, searches, and images. Designed to have a seamless feel.

Superlight vanilla javascript dropdowns by LCweb is a dependency-free JavaScript library designed to enhance the original selection element with advanced features like custom images, live search, and more.

List of most important features:

Single file 18 KB, no dependencies, 100% pure JavaScript
Two themes (light, and dark) are included. Designed to be themed without any effort
Features blends support using prefixed specifiers
Supports both simple and multiple selection fields
Fully responsive and fits any width
(Optional) A default placeholder for simple selection fields
(Optional) Search bar with minimal fields
(Optional) The maximum number of options selectable
Full integration of keyboard events
Support photos option
Mobile ready
Multilingual ready

Must Read: A Prettier Way To Display Select Boxes | vue-dropdowns

How to make use of it:

1. Download and embody the LC-select information on the web 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 in your current options.

new lc_select(document.querySelector('select'), {
    // options here
});

3. Here are listed available options with default values:

<script type="text/javascript>
new lc_select('select', {

    // (bool) whether to enable fields search
    enable_search : true, 
    
    // (int) minimum options number to show search
    min_for_search : 7,   
    
    // (bool) whether to automatically focus search field on desktop (NB: will break tabindex chain)
    autofocus_search: false,
    
    // (string) defines the wrapper width: "auto" to leave it up to CSS, "inherit" 
    // to statically copy input field width, or any other CSS sizing 
    wrap_width : 'auto',
    
    // (array) custom classes assigned to the field wrapper (.lcslt-wrap) and 
    // dropdown (#lc-select-dd)
    addit_classes : [], 
    
    // (bool) if true, on simple dropdowns without a selected value, prepend 
    // an empty option using placeholder text
    pre_placeh_opt : false, 
    
    // (int|false) defining maximum selectable options for multi-select
    max_opts : false, 
    
    // (function) triggered every time field value changes. Passes value and 
    // target field object as parameters
    on_change : null, // function(new_value, target_field) {},

    // (array) option used to translate script texts
    labels : [ 
        'search options',
        'add options',
        'Select options ..',
        '.. no matching options ..',
    ],
});
</script>