Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Overview

Superlight vanilla javascript dropdowns by LCweb

Need to jump off of jQuery (or any other) dependency? Other packages are too heavy to just tweak select fields?
LC Select has been created focusing on these aspects: a pure javascript (ES6) plugin offering many features in just 19KB (+ a 4KB theme).

Top features list:

  • sigle 20KB file, no dependencies, 100% pure javascript
  • two themes (light, dark) included. Designed to be themed with no efforts
  • themes mix support using prefixed selectors
  • supports both simple and multiple select fields
  • fully responsive, fits in any width
  • (optional) default placeholder for simple select fields
  • (optional) searchbar with minimum fields threshold
  • (optional) maximum selectable options
  • complete keyboard events integration
  • option images support
  • mobile ready
  • multilanguage ready

Tested on all mordern browsers (don't ask for old IE support please)
For live demos check: https://lcweb.it/lc-select-javascript-plugin


Installation & Usage

  1. include lc_select.min.js

  2. include a theme (eg. themes/light.css)

  3. initialize plugin targeting one/multiple select fields
    NB: first parameter may be a textual selector or a DOM object (yes, also jQuery objects)

<script type="text/javascript>
new lc_select('select');
</script>

Specific HTML attributes

There are two optional attributes you can use to take advantage of plugin functionalities:

  • data-placeholder: to be used on the select HTML tag, sets field placeholder in case of no option selected
    (check also pre_placeh_opt option for simple selects)

  • data-image: to be used on optgroup or option HTML tags, sets option's image

<select name="simple" data-placeholder="Select something please ..">
    <optgroup label="Europe" data-image="demo-img/eu.svg">
        <option value="ita" data-image="demo-img/ita.svg">Italy</option>
        <option value="fra" data-image="demo-img/fra.png">France</option>
        <option value="esp" data-image="demo-img/esp.png">Spain</option>
    </optgroup>
</select>

Options

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>

Mixing themes

The easiest and cleanest way to mix themes on the same webpage is

  1. using addit_classes option to specify the theme prefix

  2. include prefixed themes version (there are prefixed versions of dark/ligh themes in the "themes" folder)

<link href="themes/light_prefixed.css" rel="stylesheet" type="text/css">
<link href="themes/dark_prefixed.css" rel="stylesheet" type="text/css">

<script type="text/javascript>
new lc_select('.select-class-light', {
    addit_classes : ['lcslt-light']
});

new lc_select('.select-class-dark', {
    addit_classes : ['lcslt-dark']
});
</script>

Public Events

Alternatively to the "on_change" option, you can use the native "change" element event to track field changes

<script type="text/javascript>
document.querySelectorAll('select').forEach(function(el) {

    el.addEventListener('change', ...);
});
</script>

Extras

There are two extra events you can trigger on initialized elements:

  • lc-select-refresh: re-sync select field options and status with plugin instance (eg. when new fields are dynamically added)

  • lc-select-destroy: remove plugn instance, coming back to HTML select field

<script type="text/javascript>
const select = document.querySelector('select');

// initialize
new lc_select(select);

// re-sync
const resyncEvent = new Event('lc-select-refresh');
select.dispatchEvent(resyncEvent);

// destroy
const destroyEvent = new Event('lc-select-destroy');
select.dispatchEvent(destroyEvent);
</script>

Copyright © Luca Montanari - LCweb

You might also like...

🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: 🟢 Fully responsive clean UI. 🟢 Entirely mobile respo

Nov 16, 2022

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

Jan 4, 2023

🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

🍭 search-buddy search-buddy is an open‑source ultra lightweight javascript plugin (* 1kb). It can help you create instant search and/or facilitate n

Jun 16, 2022

🤖 A programming-themed based-in-terminal clicker game!

🤖 A programming-themed based-in-terminal clicker game!

Termi Clicker 🤖 A programming-themed clicker game for your terminal! 🤖 Usage npx termi-clicker@latest - install & play the game For now, global inst

Oct 3, 2022

A Notion themed portfolio developed with NextJS, deployed on Vercel.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jul 19, 2022

A simple 2D jungle-themed fighting game

🍃 🐯 2D Jungle Fighting Game 🐯 🍃 This is a simple 2D fighting game made with JavaScript and HTML Canvas. It's meant to be played on desktop, with a

Jan 7, 2023

A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

Copy Search URL This plugin adds a button to Obsidian's search view. Clicking it will copy the Obsidian URL for the current search to the clipboard. T

Dec 26, 2022

🍉 Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in Melon

🍉 Water Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in MelonRuntime In

Aug 6, 2022
Comments
  • bug: error on search

    bug: error on search

    If you search and find a result there is a js error in console. try your demo page: https://lcweb.it/lc-select-javascript-plugin

    search for "italy"

    opened by saiballo 1
  • suggest: remove

    suggest: remove ".." for input search placeholder

    I think your plugin would be more flexible if you remove double ".." form line 565:

    '<input type="text" name="lcslt-search" value="" placeholder="'+ options.labels[0] +'" autocomplete="off" />' +

    So you leave to dev the choice to use or not to use dots in the placeholder text. For example in Italy we use three dots, not two.

    cheers

    opened by saiballo 1
  • bug: js error on resize

    bug: js error on resize

    Hi,

    when a select is opened, if you resize the page, it closes correctly but there is a js error in console when you try to reopen it.

    But a part of that I love your plugin... good job.

    Schermata a 2022-10-16 18-27-04

    opened by saiballo 1
  • Sort order for generated select list

    Sort order for generated select list

    Excellent plugin! The list generated by the plugin appears to be sorted based on the option's value rather than its text content. In my use case these are not necessarily the same (eg I have an ID for the option value and a label for the text) can the list be sorted/sortable by the text value instead? An example would be:

    <option value="46176">Accidents, emergency response &amp; poison centres</option>
    <option value="18938">Alternatives assessment &amp; substitution</option>
    <option value="81484">Animal testing</option>
    
    opened by jeremyhalliwell 1
Releases(v1.1.7)
Owner
Luca
Italian web developer speciailzed in wordpress, PHP and jQuery applications. Envato elite author and one of the most popular Codecanyon publishers
Luca
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F

CodeHim 24 Feb 14, 2022
🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

?? Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

Simon 3.9k Dec 27, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Simple quick javascript dropdown plugin with search, that able to work with thousands of options

fstdropdown fstdropdown - simple quick javascript dropdown plugin with bootstrap design and search, that able to work with thousands of options. Now w

Vladyslav Andrieiev 15 Nov 12, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A build plugin to integrate Gatsby seamlessly with Netlify

Essential Gatsby Plugin This build plugin is a utility for supporting Gatsby on Netlify. To support build caching and Gatsby functions on Netlify, you

Netlify 72 Dec 27, 2022
"Jira Search Helper" is a project to search more detail view and support highlight than original jira search

Jira Search Helper What is Jira Search Helper? "Jira Search Helper" is a project to search more detail view and support highlight than original jira s

null 41 Dec 23, 2022
Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links

rebrandly-express Seamlessly connect your web server to Rebrandly so that you can re-use your domain name for both your app and your short links Rebra

null 3 Dec 13, 2022
Bootstrap 4 Navbar with multiple dropdowns

Bootstrap Navbar Dropdowns Support for bootstrap 3, 4 and 5 Installation Node npm install boostrap-navbar-dropdowns or yarn add boostrap-navbar-dropd

Guilherme Fontenele 94 Aug 22, 2022