tail.select

Ciprian on Tuesday, March 30, 2021 in AJAX and Fetching Data, JavaScript DOM

NEW! Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

HTML Select Fields as beautiful as never before

tail.select is back: Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

Version 0.5.22, Vanilla JS, Plain JS, ES6, Modern Browsers, GitHub

tail.select - Beautify Select Fields

Replace and improve your HTML <select> fields with style with nothing but Vanilla JavaScript!

A few notable features:

  • Beautiful (Multiple) Select Field
  • Awesome Search function
  • Move selected Options wherever you want
  • Over 30 Options & 5 Themes
  • Extend- and Translatable Environment
  • Hackable with 3 Callbacks & 3 Events
  • tail.select is back in plain vanilla JavaScript…
  • …and still Free/To/Use - MIT Licensed

tail.select - Create beautiful multiselect fields with vanilla JavaScript. | Product Hunt

The tail.select script is back, re-written in vanilla JavaScript and ready to beautify and extend your HTML <select> fields... again! Add a search bar, multi-selection utilities (such as select all or none buttons), deselectability on single select fields, a perfect design and many more user-friendly functions to your web-application.

tail.select - In the wild

See tail.select in action on KMProperty.ie.

The search features optgroups, search (for really long lists) and quick select (All, None or each optgroup).

Enabling a dropdown is as easy as 🍦 Vanilla JavaScript -

tail.select(".select");
tail.select - KMProperty.ie
tail.select on KMProperty.ie

A beautiful Select Field

The tail.select fields below shows you the absolute standard, without any settings!

Single
Multiple
HTML Structure
<select class="select" multiple>
        <option>[...]</option>
        <option>[...]</option>
        <option>[...]</option>
    </select>
JavaScript Code
tail.select(".select");

A grouped Select Field

It goes on without any setting, but with some more HTML Code to define some optgroup stuff!

Single
Multiple
HTML Structure
<select class="select" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select");

A finding Select Field

Our first line of (JavaScript) code enables the search field within the dropdown element.

Single Search
Multiple Search
HTML Structure
<select class="select-search" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-search", {
        search: true
    });

A descriptive Select Field

Just one option and some HTML stuff more and tail.select allows us some descriptive text.

Single Descriptions
Multiple Descriptions
HTML Structure
<select class="select-descriptions" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-descriptions", {
        search: true,
        descriptions: true,
    });

A limitable Select Field

You can allow to deselect single select fields, and you can limit the selection on multiple ones.

DeSelectable Single
Limit Multiple
HTML Structure
<select class="select-[...]" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-deselect", {
        search: true,
        descriptions: true,
        deselect: true,
    });
    tail.select(".select-limit", {
        search: true,
        descriptions: true,
        multiLimit: 10
    });

A movable Select Field

It is also possible to move your selections to an existing container elsewhere and hide the respective options within the dropdown field.

Move to an external Container
Move to the Label
HTML Structure
<select class="select-[...]" multiple>
        <optgroup label="[...]">
            <option>[...]</option>
            <option>[...]</option>
            <option>[...]</option>
        </optgroup>
    </select>
JavaScript Code
tail.select(".select-deselect", {
        search: true,
        descriptions: true,
        hideSelected: true,
        hideDisabled: true,
        multiLimit: 15,
        multiShowCount: false,
        multiContainer: ".tail-move-container"
    });
    tail.select(".select-limit", {
        search: true,
        descriptions: true,
        hideSelected: true,
        hideDisabled: true,
        multiLimit: 15,
        multiShowCount: false,
        multiContainer: true
    });

A manipulatable Select Field

A small example to show the power of the tail.select.options class.


A hackable Select Field

The magic of Hooks and Callbacks.

Related posts

September 25, 2023

Segmented Horizontal Bar Chart (Graph) Using Vanilla JavaScript

JavaScript

December 27, 2022

How to Open Only One Details/Summary Element at a Time

JavaScript Post Carousel

April 27, 2021

How I Created My Homepage JavaScript Post Carousel

7 comments on “tail.select”

      1. I see, thank you so much.

        The only problem is though on the UI it deselects, being part of form field, it submits the first value from the dropdown.

  3. @Ciprian,
    I have a very different scenario, the list I am trying to populate in the tail.select, is more than 10k, for which it becomes very slow to render.
    I was wondering is there a way to populate the items on key in, is there a way?

    Reply

    1. No, there is no way. Even if it was a native dropdown, it would still be overkill. For this feature you should implement AJAX searching or autocomplete.

      10k is too much for any control.

      I am working on a simpler select feature, but even that wouldn’t work.

      Here’s an example:
      https://tarekraafat.github.io/autoComplete.js/#/

      Or even this one:
      https://codepen.io/ciprian/pen/poWvQox?editors=0010

      Or:
      https://dev.to/stephenafamo/how-to-create-an-autocomplete-input-with-plain-javascript

      Or:
      https://goodies.pixabay.com/javascript/auto-complete/demo.html

      Hope this helps!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *