tail.select

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

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.

Previous article

How I added a neat effect in 30 lines using IntersectionObserver

Next article

tail.select takeover and update

Ciprian Popescu

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.

If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!

7 comments on “tail.select”

Gajendra Jena says:

July 21, 2021 at 19:29

With simple select tail.select selects the first option, the placeholder doesn’t show up.

https://jsfiddle.net/gajendraatreferral/q6w72x80/1/

with the example A manipulatable Select Field you have taken a select for which placeholder is shown.
should I pass any options for this?

Reply
1. Ciprian says:
  
  July 22, 2021 at 00:00
  
  See an updated example here – https://jsfiddle.net/getbutterfly/03fz1wvL/
  
  Reply
  1. Gajendra Jena says:
    
    October 24, 2021 at 05:41
    
    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.
Pedja says:

September 17, 2021 at 15:50

Hi, do you have examle how tu use custom function in SortItems, to get ietems sorted by value.
Thanks

Reply
1. Ciprian says:
  
  September 20, 2021 at 13:45
  
  Ideally, you would do this prior to enabling tail.select by using something similar to asort() in PHP.
  
  Reply
Gajendra Jena says:

November 17, 2021 at 06:54

@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. Ciprian says:
  
  December 1, 2021 at 17:46
  
  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

HTML Select Fields as beautiful as never before

tail.select - Beautify Select Fields

tail.select - In the wild

A beautiful Select Field

Single

Multiple

HTML Structure

JavaScript Code

A grouped Select Field

Single

Multiple

HTML Structure

JavaScript Code

A finding Select Field

Single Search

Multiple Search

HTML Structure

JavaScript Code

A descriptive Select Field

Single Descriptions

Multiple Descriptions

HTML Structure

JavaScript Code

A limitable Select Field

DeSelectable Single

Limit Multiple

HTML Structure

JavaScript Code

A movable Select Field

Move to an external Container

Move to the Label

HTML Structure

JavaScript Code

A manipulatable Select Field

A hackable Select Field

How I added a neat effect in 30 lines using IntersectionObserver

tail.select takeover and update

Related posts

7 comments on “tail.select”

Leave a Reply Cancel reply

Latest Articles