Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tail.select

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tail.select

Create beautiful, functional and extensive (Multi) select fields, written in Vanilla without any dependencies!

  • 0.5.7
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5K
increased by5.11%
Maintainers
1
Weekly downloads
 
Created
Source

tail.select - Beautify Select Fields

plainJS npm Version npm Downloads License Author

The tail.select script is back and ready to beautify your (multiple) select fields again, now also with an own search method and many features to increase the usability and handling on many as well as on just a few options! It contains all options and features from the original deprecated jQuery Version, back from 2014 (+ a MooTools implementation)!

Wanna see tail.select in action?

Wanna translate tail.select in your language?

Features

  • Compatible with all modern browsers, and also for IE >= 9.
  • Supports Single and Multiple Select fields, also deselect- and limitable!
  • Offers a Search field within the dropdown list to find the desired options quickly!
  • Offers a Description text to describe each single option!
  • Allows to manipulate (add, edit and delete) each single option during the runtime.
  • Move selected options wherever you want / need.
  • Bindings for the jQuery and MooTools library and usable as AMD and ES6 Module.
  • No dependencies, just include and use it!
  • Event Listeners to bind your own function on each action.
  • ... and many settings to configure the environment and behavior!

Install & Embed

The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using npm, Yarn or bower:

npm install tail.select --save
yarn add tail.select --save
bower install tail.select --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://cdn.jsdelivr.net/npm/tail.select@latest/
https://unpkg.com/tail.select/

Thanks To

Translations

Documentation

The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Files

The tail.select package contains different JavaScript files:

  • js/tail.select(.min).js The main JavaScript with en tranlation strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL available translations.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version (includes all translations).
  • langs/tail.select-all(.min).js Just ALL translation strings itself.
  • langs/tail.select-{locale}.js Just the {locale} translation strings.

Basic Instructions

You can pass up to 2 arguments to the tail.select constructor, the first parameter is required and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or just a single selector as string, which calls the querySelectorAll() method on its own. The second parameter is optional and, if set, MUST be an object with your tail.select options.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link type="text/css" rel="stylesheet" href="css/tail.select-default.css" />
    </head>
    <body>
        <script type="text/javascript" src="js/tail.select.min.js"></script>
        <!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> -->

        <select>
            <option>My Option</option>
        </select>

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.select("select", { /* Your Options */ });
            });
        </script>
    </body>
</html>

Default options

Please check out GitHubs Wiki Pages to read more about each single option!

tail.select("select", {
    animate: true,
    classNames: null,
    csvOutput: false,
    csvSeparator: ",",
    descriptions: false,
    deselect: false,
    disabled: false,                // NEW IN 0.5.0
    height: 350,
    hideDisabled: false,
    hideSelected: false,
    items: {},
    locale: "en",                   // NEW IN 0.5.0
    multiple: false,
    multiLimit: Infinity,           // UPDATE IN 0.5.0
    multiPinSelected: false,        // NEW IN 0.5.0
    multiContainer: false,          // UPDATE IN 0.5.0
    multiShowCount: true,
    multiShowLimit: false,          // NEW IN 0.5.0
    multiSelectAll: false,
    multiSelectGroup: true,
    openAbove: null,
    placeholder: null,
    search: false,
    searchFocus: true,
    searchMarked: true,
    searchDisabled: true,           // NEW IN 0.5.5
    sortItems: false,
    sortGroups: false,
    sourceBind: false,              // NEW IN 0.5.0
    sourceHide: true,               // NEW IN 0.5.0
    startOpen: false,
    stayOpen: false,                // UPDATED IN 0.5.0
    width: null,
    cbComplete: undefined,          // NEW IN 0.5.0
    cbEmpty: undefined,             // NEW IN 0.5.0
    cbLoopItem: undefined,
    cbLoopGroup: undefined
});

Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET

Keywords

FAQs

Package last updated on 20 Mar 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc