tail-select-rails 1.0.2 → 1.0.4

data/app/assets/javascripts/tail.select.js

@@ -1,603 +1,1647 @@
-/**
- *  tail.select - The vanilla JavaScript solution to make your <select> fields awesome!
- *
- *  @author     Ciprian Popescu <getbutterfly@gmail.com>
- *  @version    1.0.2
- *  @url        https://getbutterfly.com/tail-select/
- *  @github     https://github.com/wolffe/tail.select.js
- *  @license    MIT License
- *  @copyright  Copyright 2020 - 2024 Ciprian Popescu <getbutterfly@gmail.com>
+/*
+ |  tail.select - The vanilla solution to make your HTML select fields AWESOME!
+ |  @file       ./js/tail.select.js
+ |  @author     SamBrishes <sam@pytes.net>
+ |  @version    0.5.16 - Beta
+ |
+ |  @website    https://github.com/pytesNET/tail.select
+ |  @license    X11 / MIT License
+ |  @copyright  Copyright © 2014 - 2019 SamBrishes, pytesNET <info@pytes.net>
  */
-const tail = {
-    select: function (selector, options = {}) {
-        // Default options
-        const defaultOptions = {
-            multiTags: false,
-            multiCounter: true,
-            theme: 'light', // light|dark
-            classNames: 'tail-default',
-            strings: {
-                all: "All",
-                none: "None",
-                placeholder: "Select an option...",
-                search: "Type in to search...",
-            }
-        };
-
-        // Merge default options with provided options
-        const opts = { ...defaultOptions, ...options };
-
-        // Extract options
-        const { multiTags, multiCounter, theme, classNames, strings } = opts;
-
-        //
-        const originalSelects = document.querySelectorAll(selector);
-
-        originalSelects.forEach((originalSelect) => {
-            // Hide original dropdown
-            originalSelect.style.display = "none";
-
-            // Create custom dropdown container
-            const customDropdown = document.createElement("div");
-            customDropdown.classList.add("tail-select");
-            customDropdown.classList.add(originalSelect.id);
-            customDropdown.classList.add(opts.classNames);
-            customDropdown.dataset.theme = `tail-theme--${opts.theme}`;
-
-            if (originalSelect.multiple) {
-                customDropdown.classList.add("tail--multiple");
+;(function(root, factory){
+    if(typeof define === "function" && define.amd){
+        define(function(){ return factory(root); });
+    } else if(typeof module === "object" && module.exports){
+        module.exports = factory(root);
+    } else {
+        if(typeof root.tail === "undefined"){
+            root.tail = {};
+        }
+        root.tail.select = factory(root);
+
+        // jQuery Support
+        if(typeof jQuery !== "undefined"){
+            jQuery.fn.tailselect = function(o){
+                var r = [], i;
+                this.each(function(){ if((i = tail.select(this, o)) !== false){ r.push(i); } });
+                return (r.length === 1)? r[0]: (r.length === 0)? false: r;
+            };
+        }
+
+        // MooTools Support
+        if(typeof MooTools !== "undefined"){
+            Element.implement({ tailselect: function(o){ return new tail.select(this, o); } });
+        }
+    }
+}(window, function(root){
+    "use strict";
+    var w = root, d = root.document;
+
+    // Internal Helper Methods
+    function cHAS(el, name){
+        return (el && "classList" in el)? el.classList.contains(name): false;
+    }
+    function cADD(el, name){
+        return (el && "classList" in el)? el.classList.add(name): undefined;
+    }
+    function cREM(el, name){
+        return (el && "classList" in el)? el.classList.remove(name): undefined;
+    }
+    function trigger(el, event, opt){
+        if(CustomEvent && CustomEvent.name){
+            var ev = new CustomEvent(event, opt);
+        } else {
+            var ev = d.createEvent("CustomEvent");
+            ev.initCustomEvent(event, !!opt.bubbles, !!opt.cancelable, opt.detail);
+        }
+        return el.dispatchEvent(ev);
+    }
+    function clone(obj, rep){
+        if(typeof Object.assign === "function"){
+            return Object.assign({}, obj, rep || {});
+        }
+        var clone = Object.constructor();
+        for(var key in obj){
+            clone[key] = (key in rep)? rep[key]: obj[key];
+        }
+        return clone;
+    }
+    function create(tag, classes){
+        var r = d.createElement(tag);
+            r.className = (classes && classes.join)? classes.join(" "): classes || "";
+        return r;
+    }
+
+    /*
+     |  SELECT CONSTRUCTOR
+     |  @since  0.5.16 [0.3.0]
+     */
+    var select = function(el, config){
+        el = (typeof el === "string")? d.querySelectorAll(el): el;
+        if(el instanceof NodeList || el instanceof HTMLCollection || el instanceof Array){
+            for(var _r = [], l = el.length, i = 0; i < l; i++){
+                _r.push(new select(el[i], clone(config, {})));
+            }
+            return (_r.length === 1)? _r[0]: ((_r.length === 0)? false: _r);
+        }
+        if(!(el instanceof Element) || !(this instanceof select)){
+            return !(el instanceof Element)? false: new select(el, config);
+        }
+
+        // Check Element
+        if(select.inst[el.getAttribute("data-tail-select")]){
+            return select.inst[el.getAttribute("data-tail-select")];
+        }
+        if(el.getAttribute("data-select")){
+            var test = JSON.parse(el.getAttribute("data-select").replace(/\'/g, '"'));
+            if(test instanceof Object){
+                config = clone(config, test); // This is a unofficial function ;3
+            }
+        }
+
+        // Get Element Options
+        var placeholder = el.getAttribute("placeholder") || el.getAttribute("data-placeholder"),
+            fb1 = "bindSourceSelect", fb2 = "sourceHide"; // Fallbacks
+        config = (config instanceof Object)? config: {};
+        config.multiple = ("multiple" in config)? config.multiple: el.multiple;
+        config.disabled = ("disabled" in config)? config.disabled: el.disabled;
+        config.placeholder = placeholder || config.placeholder || null;
+        config.width = (config.width === "auto")? el.offsetWidth + 50: config.width;
+        config.sourceBind = (fb1 in config)? config[fb1]: config.sourceBind || false;
+        config.sourceHide = (fb2 in config)? config[fb2]: config.sourceHide || true;
+        config.multiLimit = (config.multiLimit >= 0)? config.multiLimit: Infinity;
+
+
+        // Init Instance
+        this.e = el;
+        this.id = ++select.count;
+        this.con = clone(select.defaults, config);
+        this.events = {};
+        select.inst["tail-" + this.id] = this;
+        return this.init().bind();
+    }, options;
+    select.version = "0.5.16";
+    select.status = "beta";
+    select.count = 0;
+    select.inst = {};
+
+    /*
+     |  STORAGE :: DEFAULT OPTIONS
+     */
+    select.defaults = {
+        animate: true,              // [0.3.0]      Boolean
+        classNames: null,           // [0.2.0]      Boolean, String, Array, null
+        csvOutput: false,           // [0.3.4]      Boolean
+        csvSeparator: ",",          // [0.3.4]      String
+        descriptions: false,        // [0.3.0]      Boolean
+        deselect: false,            // [0.3.0]      Boolean
+        disabled: false,            // [0.5.0]      Boolean
+        height: 350,                // [0.2.0]      Integer, null
+        hideDisabled: false,        // [0.3.0]      Boolean
+        hideSelected: false,        // [0.3.0]      Boolean
+        items: {},                  // [0.3.0]      Object
+        locale: "en",               // [0.5.0]      String
+        linguisticRules: {          // [0.5.9]      Object
+            "е": "ё",
+            "a": "ä",
+            "o": "ö",
+            "u": "ü",
+            "ss": "ß"
+        },
+        multiple: false,            // [0.2.0]      Boolean
+        multiLimit: Infinity,       // [0.3.0]      Integer, Infinity
+        multiPinSelected: false,    // [0.5.0]      Boolean
+        multiContainer: false,      // [0.3.0]      Boolean, String
+        multiShowCount: true,       // [0.3.0]      Boolean
+        multiShowLimit: false,      // [0.5.0]      Boolean
+        multiSelectAll: false,      // [0.4.0]      Boolean
+        multiSelectGroup: true,     // [0.4.0]      Boolean
+        openAbove: null,            // [0.3.0]      Boolean, null
+        placeholder: null,          // [0.2.0]      String, null
+        search: false,              // [0.3.0]      Boolean
+        searchConfig: [             // [0.5.13]     Array
+            "text", "value"
+        ],
+        searchFocus: true,          // [0.3.0]      Boolean
+        searchMarked: true,         // [0.3.0]      Boolean
+        searchMinLength: 1,         // [0.5.13]     Integer
+        searchDisabled: true,       // [0.5.5]      Boolean
+        sortItems: false,           // [0.3.0]      String, Function, false
+        sortGroups: false,          // [0.3.0]      String, Function, false
+        sourceBind: false,          // [0.5.0]      Boolean
+        sourceHide: true,           // [0.5.0]      Boolean
+        startOpen: false,           // [0.3.0]      Boolean
+        stayOpen: false,            // [0.3.0]      Boolean
+        width: null,                // [0.2.0]      Integer, String, null
+        cbComplete: undefined,      // [0.5.0]      Function
+        cbEmpty: undefined,         // [0.5.0]      Function
+        cbLoopItem: undefined,      // [0.4.0]      Function
+        cbLoopGroup: undefined      // [0.4.0]      Function
+    };
+
+    /*
+     |  STORAGE :: STRINGS
+     */
+    select.strings = {
+        de: {
+            all: "Alle",
+            none: "Keine",
+            empty: "Keine Optionen verfügbar",
+            emptySearch: "Keine Optionen gefunden",
+            limit: "Keine weiteren Optionen wählbar",
+            placeholder: "Wähle eine Option...",
+            placeholderMulti: "Wähle bis zu :limit Optionen...",
+            search: "Tippen zum suchen",
+            disabled: "Dieses Feld ist deaktiviert"
+        },
+        en: {
+            all: "All",
+            none: "None",
+            empty: "No Options available",
+            emptySearch: "No Options found",
+            limit: "You can't select more Options",
+            placeholder: "Select an Option...",
+            placeholderMulti: "Select up to :limit Options...",
+            search: "Type in to search...",
+            disabled: "This Field is disabled"
+        },
+        es: {
+            all: "Todos",
+            none: "Ninguno",
+            empty: "No hay opciones disponibles",
+            emptySearch: "No se encontraron opciones",
+            limit: "No puedes seleccionar mas opciones",
+            placeholder: "Selecciona una opción...",
+            placeholderMulti: "Selecciona hasta :límite de opciones...",
+            search: "Escribe dentro para buscar...",
+            disabled: "Este campo esta deshabilitado"
+        },
+        fi: {
+            all: "Kaikki",
+            none: "Ei mitään",
+            empty: "Ei vaihtoehtoja",
+            emptySearch: "Etsimääsi vaihtoehtoa ei löytynyt",
+            limit: "Muita vaihtoehtoja ei voi valita",
+            placeholder: "Valitse...",
+            placeholderMulti: "Valitse maksimissaan :limit...",
+            search: "Hae tästä...",
+            disabled: "Kenttä on poissa käytöstä"
+        },
+        fr: {
+            all: "Tous",
+            none: "Aucun",
+            empty: "Aucune option disponible",
+            emptySearch: "Aucune option trouvée",
+            limit: "Aucune autre option sélectionnable",
+            placeholder: "Choisissez une option...",
+            placeholderMulti: "Choisissez jusqu'à :limit option(s)...",
+            search: "Rechercher...",
+            disabled: "Ce champs est désactivé"
+        },
+        it: {
+            all: "Tutti",
+            none: "Nessuno",
+            empty: "Nessuna voce disponibile",
+            emptySearch: "Nessuna voce trovata",
+            limit: "Non puoi selezionare più Voci",
+            placeholder: "Seleziona una Voce",
+            placeholderMulti: "Selezione limitata a :limit Voci...",
+            search: "Digita per cercare...",
+            disabled: "Questo Campo è disabilitato"
+        },
+        no: {
+            all: "Alle",
+            none: "Ingen",
+            empty: "Ingen valg tilgjengelig",
+            emptySearch: "Ingen valg funnet",
+            limit: "Du kan ikke velge flere",
+            placeholder: "Velg...",
+            placeholderMulti: "Velg opptil :limit...",
+            search: "Søk...",
+            disabled: "Dette feltet er deaktivert"
+        },
+        pt_BR: {
+            all: "Todas",
+            none: "Nenhuma",
+            empty: "Nenhuma opção disponível",
+            emptySearch: "Nenhuma opção encontrada",
+            limit: "Não é possível selecionar outra opção",
+            placeholder: "Escolha uma opção ...",
+            placeholderMulti: "Escolha até: :limit opção(ões) ...",
+            search: "Buscar ...",
+            disabled: "Campo desativado"
+        },
+        ru: {
+            all: "Все",
+            none: "Ничего",
+            empty: "Нет доступных вариантов",
+            emptySearch: "Ничего не найдено",
+            limit: "Вы не можете выбрать больше вариантов",
+            placeholder: "Выберите вариант...",
+            placeholderMulti: function(args){
+                var strings = ["варианта", "вариантов", "вариантов"], cases = [2, 0, 1, 1, 1, 2], num = args[":limit"];
+                var string = strings[(num%100 > 4 && num%100 < 20)? 2: cases[(num%10 < 5)? num%10: 5]];
+                return "Выбор до :limit " + string + " ...";
+            },
+            search: "Начните набирать для поиска ...",
+            disabled: "Поле отключено"
+        },
+        tr: {
+            all: "Tümü",
+            none: "Hiçbiri",
+            empty: "Seçenek yok",
+            emptySearch: "Seçenek bulunamadı",
+            limit: "Daha fazla Seçenek seçemezsiniz",
+            placeholder: "Bir Seçenek seçin...",
+            placeholderMulti: "En fazla :limit Seçenek seçin...",
+            search: "Aramak için yazın...",
+            disabled: "Bu Alan kullanılamaz"
+        },
+        modify: function(locale, id, string){
+            if(!(locale in this)){
+                return false;
+            }
+            if((id instanceof Object)){
+                for(var key in id){
+                    this.modify(locale, key, id[key]);
+                }
             } else {
-                customDropdown.classList.add("tail--single");
+                this[locale][id] = (typeof string === "string")? string: this[locale][id];
+            }
+            return true;
+        },
+        register: function(locale, object){
+            if(typeof locale !== "string" || !(object instanceof Object)){
+                return false;
+            }
+            this[locale] = object;
+            return true;
+        }
+    };
+
+    /*
+     |  TAIL.SELECT HANDLER
+     */
+    select.prototype = {
+        /*
+         |  INERNAL :: TRANSLATE
+         |  @since  0.5.8 [0.5.8]
+         */
+        _e: function(string, replace, def){
+            if(!(string in this.__)){
+                return (!def)? string: def;
             }
 
-            // Create search input
-            const searchInput = document.createElement("input");
-            searchInput.type = "text";
-            searchInput.classList.add('tail--search');
-            searchInput.placeholder = strings.placeholder || "Select an option...";
+            var string = this.__[string];
+            if(typeof string === "function"){
+                string = string.call(this, replace);
+            }
+            if(typeof replace === "object"){
+                for(var key in replace){
+                    string = string.replace(key, replace[key]);
+                }
+            }
+            return string;
+        },
+
+        /*
+         |  INTERNAL :: INIT SELECT FIELD
+         |  @since  0.5.13 [0.3.0]
+         */
+        init: function(){
+            var self = this, classes = ["tail-select"], con = this.con,
+                regexp = /^[0-9.]+(?:cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|\%)$/i;
+
+            // Init ClassNames
+            var c = (con.classNames === true)? this.e.className: con.classNames;
+            classes.push((c && c.push)? c.join(" "): (c && c.split)? c: "no-classes");
+            if(con.hideSelected){    classes.push("hide-selected"); }
+            if(con.hideDisabled){    classes.push("hide-disabled"); }
+            if(con.multiLimit == 0){ classes.push("disabled");      }
+            if(con.multiple){        classes.push("multiple");      }
+            if(con.deselect){        classes.push("deselect");      }
+            if(con.disabled){        classes.push("disabled");      }
+
+            // Init Variables
+            this.__ = clone(select.strings.en, select.strings[con.locale] || {});
+            this._init = true;
+            this._query = false;
+            this.select = create("DIV", classes);
+            this.label = create("DIV", "select-label");
+            this.dropdown = create("DIV", "select-dropdown");
+            this.search = create("DIV", "dropdown-search");
+            this.csvInput = create("INPUT", "select-search");
+
+            // Build :: Select
+            if(this.e.getAttribute("tabindex") !== null){
+                this.select.setAttribute("tabindex", this.e.getAttribute("tabindex"));
+            } else {
+                this.select.setAttribute("tabindex", 0);
+            }
+            if(con.width && regexp.test(con.width)){
+                this.select.style.width = con.width;
+            } else if(con.width && !isNaN(parseFloat(con.width, 10))){
+                this.select.style.width = con.width + "px";
+            }
 
-            // Add focus event to change the placeholder
-            searchInput.addEventListener("focus", () => {
-                searchInput.placeholder = strings.search || "Type in to search...";
+            // Build :: Label
+            this.label.addEventListener("click", function(event){
+                self.toggle.call(self, self.con.animate);
             });
+            this.select.appendChild(this.label);
 
-            // Add blur event to revert the placeholder when not focused
-            searchInput.addEventListener("blur", () => {
-                searchInput.placeholder = strings.placeholder || "Select an option...";
-            });
+            // Build :: Dropdown
+            if(!isNaN(parseInt(con.height, 10))){
+                this.dropdown.style.maxHeight = parseInt(con.height, 10) + "px";
+            }
+            if(con.search){
+                this.search.innerHTML = '<input type="text" class="search-input" />';
+                this.search.children[0].placeholder = this._e("search");
+                this.search.children[0].addEventListener("input", function(event){
+                    self.query.call(self, (this.value.length > con.searchMinLength)? this.value: undefined);
+                });
+                this.dropdown.appendChild(this.search);
+            }
+            this.select.appendChild(this.dropdown);
+
+            // Build :: CSV Input
+            this.csvInput.type = "hidden";
+            if(con.csvOutput){
+                this.csvInput.name = this.e.name;
+                this.e.removeAttribute("name");
+                this.select.appendChild(this.csvInput);
+            }
 
-            // Add input event to change the placeholder
-            searchInput.addEventListener("input", () =>
-                filterOptions(originalSelect, searchInput)
-            );
-
-            // Create floating toolbar
-            const tailFloatingToolbar = document.createElement("div");
-            tailFloatingToolbar.classList.add("tail--toolbar");
-
-            // Create toggle-all checkbox
-            const toggleAllCheckbox = document.createElement("input");
-            toggleAllCheckbox.type = "checkbox";
-            toggleAllCheckbox.value = strings.all || "All";
-            toggleAllCheckbox.addEventListener("change", () =>
-                toggleAll(originalSelect, toggleAllCheckbox)
-            );
-
-            const toggleAllLabel = document.createElement("label");
-            toggleAllLabel.textContent = strings.all || "All";
-            toggleAllLabel.classList.add("all");
-            toggleAllLabel.appendChild(toggleAllCheckbox);
-
-            // Create uncheck-all button
-            const uncheckAllButton = document.createElement("button");
-            uncheckAllButton.type = 'button';
-            uncheckAllButton.textContent = strings.none || "None";
-            uncheckAllButton.classList.add("uncheck");
-            uncheckAllButton.addEventListener("click", () =>
-                uncheckAll(originalSelect)
-            );
-
-            if (opts.multiCounter) {
-                // Create counter
-                const counter = document.createElement("span");
-                counter.textContent = "0";
-                counter.classList.add("tail--counter");
-
-                customDropdown.appendChild(counter);
-            }
-
-            // Create nested list
-            const nestedList = document.createElement("div");
-            nestedList.classList.add("tail--nested-dropdown");
-            nestedList.style.display = "none"; // Initially hide the list
-
-            customDropdown.appendChild(searchInput);
-            customDropdown.appendChild(tailFloatingToolbar);
-            customDropdown.appendChild(nestedList);
-
-            tailFloatingToolbar.appendChild(toggleAllLabel);
-            tailFloatingToolbar.appendChild(uncheckAllButton);
-
-            // Insert custom dropdown after the original select
-            originalSelect.insertAdjacentElement("afterend", customDropdown);
-
-            // Create ul element for displaying selected options as pills
-            const selectedOptionsList = document.createElement("ul");
-            selectedOptionsList.classList.add("tail--selected-options-list");
-
-            if (opts.multiTags) {
-                if (originalSelect.multiple) {
-                    // Insert selectedOptionsList as the next sibling of customDropdown
-                    customDropdown.insertAdjacentElement(
-                        "afterend",
-                        selectedOptionsList
-                    );
-                }
-            }
-            //
-
-            function buildNestedList() {
-                const fragment = document.createDocumentFragment();
-
-                const optgroups = originalSelect.getElementsByTagName(
-                    "optgroup"
-                );
-
-                if (optgroups.length > 0) {
-                    for (let i = 0; i < optgroups.length; i++) {
-                        const optgroup = optgroups[i];
-                        const optgroupItem = document.createElement("div");
-                        optgroupItem.classList.add("tail--optgroup");
-
-                        // Create label for optgroup
-                        const optgroupLabel = document.createElement("label");
-
-                        // Create checkbox for optgroup
-                        const optgroupCheckbox = document.createElement(
-                            "input"
-                        );
-                        optgroupCheckbox.type = "checkbox";
-                        optgroupCheckbox.value = optgroup.label;
-                        optgroupCheckbox.addEventListener("change", () =>
-                            toggleOptgroup(optgroupCheckbox)
-                        );
-                        optgroupLabel.appendChild(optgroupCheckbox);
-
-                        // Label text for optgroup
-                        const optgroupLabelText = document.createElement(
-                            "span"
-                        );
-                        optgroupLabelText.textContent = optgroup.label;
-                        optgroupLabelText.classList.add("tail--optgroup-label");
-                        optgroupLabel.appendChild(optgroupLabelText);
-
-                        optgroupItem.appendChild(optgroupLabel);
-
-                        // Nested options list
-                        const nestedOptionsList = document.createElement("div");
-
-                        // Add ARIA attributes to the nested options list
-                        nestedOptionsList.setAttribute("role", "listbox");
-                        nestedOptionsList.classList.add("tail--nested-dropdown-list");
-                        const options = optgroup.getElementsByTagName("option");
-
-                        for (let j = 0; j < options.length; j++) {
-                            const option = options[j];
-                            const optionItem = document.createElement("div");
-                            optionItem.classList.add("tail--nested-dropdown-item");
-
-                            // Create checkbox for option
-                            const optionCheckbox = document.createElement(
-                                "input"
-                            );
-                            optionCheckbox.type = "checkbox";
-                            optionCheckbox.value = option.textContent;
-
-                            // Create label for option
-                            const optionLabel = document.createElement("label");
-
-                            // Label for option text
-                            const optionLabelText = document.createElement(
-                                "span"
-                            );
-                            optionLabelText.textContent = option.textContent;
-
-                            // Option description
-                            if (option.dataset.description) {
-                                optionLabelText.innerHTML += `<small>${option.dataset.description}</small>`;
-                            }
-
-                            // Check it
-                            if (option.selected && option.hasAttribute('selected')) {
-                                optionCheckbox.checked = true;
-                                updateCounter(originalSelect);
-                                updateCustomTextInput(originalSelect);
-                            }
-
-                            //
-
-                            optionLabel.appendChild(optionCheckbox);
-                            optionLabel.appendChild(optionLabelText);
-
-                            optionItem.appendChild(optionLabel);
-
-                            nestedOptionsList.appendChild(optionItem);
-                        }
+            // Prepare Container
+            if(con.multiple && con.multiContainer){
+                if(d.querySelector(con.multiContainer)){
+                    this.container = d.querySelector(con.multiContainer);
+                    this.container.className += " tail-select-container";
+                } else if(con.multiContainer === true){
+                    this.container = this.label;
+                    this.container.className += " tail-select-container";
+                }
+            }
 
-                        optgroupItem.appendChild(nestedOptionsList);
-                        nestedList.appendChild(optgroupItem);
-                    }
+            // Prepare Options
+            this.options = new options(this.e, this);
+            for(var l = this.e.options.length, i = 0; i < l; i++){
+                this.options.set(this.e.options[i], false);
+            }
+            for(var key in con.items){
+                if(typeof con.items[key] === "string"){
+                    con.items[key] = {value: con.items[key]};
+                }
+                this.options.add(con.items[key].key || key, con.items[key].value,
+                    con.items[key].group, con.items[key].selected,
+                    con.items[key].disabled, con.items[key].description);
+            }
+            this.query();
+
+            // Append and Return
+            if(this.e.nextElementSibling){
+                this.e.parentElement.insertBefore(this.select, this.e.nextElementSibling);
+            } else {
+                this.e.parentElement.appendChild(this.select);
+            }
+            if(con.sourceHide){
+                if(this.e.style.display == "none"){
+                    this.select.style.display = "none";
+                    this.e.setAttribute("data-select-hidden", "display");
+                } else if(this.e.style.visibility == "hidden"){
+                    this.select.style.visibiltiy = "hidden";
+                    this.e.setAttribute("data-select-hidden", "visibility");
                 } else {
-                    const options = originalSelect.getElementsByTagName(
-                        "option"
-                    );
-
-                    for (let j = 0; j < options.length; j++) {
-                        const option = options[j];
-                        const optionItem = document.createElement("div");
-                        optionItem.classList.add("tail--nested-dropdown-item");
-
-                        // Create checkbox for option
-                        const optionCheckbox = document.createElement("input");
-                        optionCheckbox.type = "checkbox";
-                        optionCheckbox.value = option.textContent;
-
-                        // Create label for option
-                        const optionLabel = document.createElement("label");
-
-                        // Label for option text
-                        const optionLabelText = document.createElement("span");
-                        optionLabelText.textContent = option.textContent;
-
-                        // Option description
-                        if (option.dataset.description) {
-                            optionLabelText.innerHTML += `<small>${option.dataset.description}</small>`;
-                        }
+                    this.e.style.display = "none";
+                    this.e.setAttribute("data-select-hidden", "0");
+                }
+            }
+            this.e.setAttribute("data-tail-select", "tail-" + this.id);
+            if(self.con.startOpen){
+                this.open(con.animate);
+            }
+            (con.cbComplete || function(){ }).call(this, this.select);
+            return (this._init = false)? this: this;
+        },
+
+        /*
+         |  INTERNAL :: EVENT LISTENER
+         |  @since  0.5.13 [0.3.0]
+         */
+        bind: function(){
+            var self = this;
+
+            // Keys Listener
+            d.addEventListener("keydown", function(event){
+                var key = (event.keyCode || event.which), opt, inner, e, temp, tmp;
+                var space = (key == 32 && self.select === document.activeElement);
+                if(!space && (!cHAS(self.select, "active") || [13, 27, 38, 40].indexOf(key) < 0)){
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
 
-                        // Check it
-                        if (option.selected && option.hasAttribute('selected')) {
-                            optionCheckbox.checked = true;
-                            updateCounter(originalSelect);
-                            updateCustomTextInput(originalSelect);
-                        }
-                        //
+                // Space
+                if(key === 32){
+                    return self.open(self.con.animate);
+                }
 
-                        optionLabel.appendChild(optionCheckbox);
-                        optionLabel.appendChild(optionLabelText);
+                // Enter || Escape
+                if(key == 13){
+                    if((opt = self.dropdown.querySelector(".dropdown-option.hover:not(.disabled)"))){
+                        self.options.select.call(self.options, opt);
+                    }
+                }
+                if(key == 27 || key == 13){
+                    return self.close(self.con.animate);
+                }
 
-                        optionItem.appendChild(optionLabel);
+                // Top || Down
+                if((opt = self.dropdown.querySelector(".dropdown-option.hover:not(.disabled)"))){
+                    cREM(opt, "hover"); e = [((key == 40)? "next": "previous") + "ElementSibling"];
+                    do {
+                        if((temp = opt[e]) !== null && opt.tagName == "LI"){
+                            opt = temp;
+                        } else if((temp = opt.parentElement[e]) !== null && temp.children.length > 0 && temp.tagName == "UL"){
+                            opt = temp.children[(key == 40)? 0: temp.children.length-1];
+                        } else {
+                            opt = false;
+                        }
+                        if(opt && (!cHAS(opt, "dropdown-option") || cHAS(opt, "disabled"))){
+                            continue;
+                        }
+                        break;
+                    } while(true);
+                }
+                if(!opt && key == 40){
+                    opt = self.dropdown.querySelector(".dropdown-option:not(.disabled)");
+                } else if(!opt && key == 38){
+                    tmp = self.dropdown.querySelectorAll(".dropdown-option:not(.disabled)");
+                    opt = tmp[tmp.length - 1];
+                }
+                if(opt && (inner = self.dropdown.querySelector(".dropdown-inner"))){
+                    var pos = (function(el){
+                        var _r = {top: el.offsetTop, height: el.offsetHeight};
+                        while((el = el.parentElement) != inner){
+                            _r.top += el.offsetTop;
+                        }
+                        return _r;
+                    })(opt);
+                    cADD(opt, "hover");
+                    inner.scrollTop = Math.max(0, pos.top - (pos.height * 2));
+                }
+                return true;
+            });
+
+            // Close
+            d.addEventListener("click", function(ev){
+                if(!cHAS(self.select, "active") || cHAS(self.select, "idle")){ return false; }
+                if(self.con.stayOpen === true){ return false; }
 
-                        nestedList.appendChild(optionItem);
+                var targets = [self.e, self.select, self.container];
+                for(var l = targets.length, i = 0; i < l; i++){
+                    if(targets[i] && (targets[i].contains(ev.target) || targets[i] == ev.target)){
+                        return false;
                     }
+                    if(!ev.target.parentElement){ return false; }
                 }
+                return self.close.call(self, self.con.animate);
+            });
 
-                // Add ARIA attributes to the custom dropdown container
-                customDropdown.setAttribute("role", "combobox");
-                customDropdown.setAttribute("aria-haspopup", "true");
-                customDropdown.setAttribute("aria-expanded", "false");
-
-                attachOptionCheckboxListeners();
+            // Bind Source Select
+            if(!this.con.sourceBind){
+                return true;
+            }
+            this.e.addEventListener("change", function(event){
+                if(event.detail != undefined){
+                    return false;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                if(!this.multiple && this.selectedIndex){
+                    self.options.select.call(self.options, this.options[this.selectedIndex]);
+                } else {
+                    var u = [].concat(self.options.selected);
+                    var s = [].filter.call(this.querySelectorAll("option:checked"), function(item){
+                        if(u.indexOf(item) >= 0){
+                            u.splice(u.indexOf(item), 1);
+                            return false;
+                        }
+                        return true;
+                    });
+                    self.options.walk.call(self.options, "unselect", u);
+                    self.options.walk.call(self.options, "select", s);
+                }
+            });
+            return true;
+        },
+
+        /*
+         |  INTERNAL :: INTERNAL CALLBACK
+         |  @since  0.5.14 [0.3.0]
+         */
+        callback: function(item, state, _force){
+            var rkey = item.key.replace(/('|\\)/g, "\\$1"),
+                rgrp = item.group.replace(/('|\\)/g, "\\$1"),
+                rsel = "[data-key='" + rkey + "'][data-group='" + rgrp + "']";
+            if(state == "rebuild"){ return this.query(); }
+
+            // Set Element-Item States
+            var element = this.dropdown.querySelector(rsel);
+            if(element && ["select", "disable"].indexOf(state) >= 0){
+                cADD(element, (state == "select"? "selected": "disabled"));
+            } else if(element && ["unselect", "enable"].indexOf(state) >= 0){
+                cREM(element, (state == "unselect"? "selected": "disabled"));
+            }
 
-                // Append the fragment to the DOM once all changes are made
-                nestedList.appendChild(fragment);
+            // Handle
+            this.update(item);
+            return (_force === true)? true: this.trigger("change", item, state);
+        },
+
+        /*
+         |  INTERNAL :: TRIGGER EVENT HANDLER
+         |  @since  0.5.2 [0.4.0]
+         */
+        trigger: function(event){
+            if(this._init){ return false; }
+            var obj = {bubbles: false, cancelable: true, detail: {args: arguments, self: this}};
+            if(event == "change" && arguments[2] && arguments[2].indexOf("select") >= 0){
+                trigger(this.e, "input", obj);
+                trigger(this.e, "change", obj);
             }
+            trigger(this.select, "tail::" + event, obj);
 
-            function toggleAll(originalSelect, toggleAllCheckbox) {
-                const isChecked = toggleAllCheckbox.checked;
-                const optionCheckboxes = nestedList.querySelectorAll(
-                    'input[type="checkbox"]'
-                );
+            var args = [], pass;
+            Array.prototype.map.call(arguments, function(item, i){
+                if(i > 0){ args.push(item); }
+            });
+            (this.events[event] || []).forEach(function(item){
+                pass = [].concat(args);
+                pass.push(item.args || null);
+                (item.cb || function(){ }).apply(obj.detail.self, pass);
+            });
+            return true;
+        },
+
+        /*
+         |  INTERNAL :: CALCULATE DROPDOWN
+         |  @since  0.5.4 [0.5.0]
+         */
+        calc: function(){
+            var clone = this.dropdown.cloneNode(true), height = this.con.height, search = 0,
+                inner = this.dropdown.querySelector(".dropdown-inner");
+
+            // Calculate Dropdown Height
+            clone = this.dropdown.cloneNode(true);
+            clone.style.cssText = "height:auto;min-height:auto;max-height:none;opacity:0;display:block;visibility:hidden;";
+            clone.style.maxHeight = this.con.height + "px";
+            clone.className += " cloned";
+            this.dropdown.parentElement.appendChild(clone);
+            height = (height > clone.clientHeight)? clone.clientHeight: height;
+            if(this.con.search){
+                search = clone.querySelector(".dropdown-search").clientHeight;
+            }
+            this.dropdown.parentElement.removeChild(clone);
+
+            // Calculate Viewport
+            var pos = this.select.getBoundingClientRect(),
+                bottom = w.innerHeight-(pos.top+pos.height),
+                view = ((height+search) > bottom)? pos.top > bottom: false;
+            if(this.con.openAbove === true || (this.con.openAbove !== false && view)){
+                view = true, height = Math.min((height), pos.top-10);
+                cADD(this.select, "open-top");
+            } else {
+                view = false, height = Math.min((height), bottom-10);
+                cREM(this.select, "open-top");
+            }
+            if(inner){
+                this.dropdown.style.maxHeight = height + "px";
+                inner.style.maxHeight = (height-search) + "px";
+            }
+            return this;
+        },
+
+        /*
+         |  API :: QUERY OPTIONS
+         |  @since  0.5.13 [0.5.0]
+         */
+        query: function(search, conf){
+            var item, tp, ul, li, a1, a2;                           // Pre-Definition
+            var self = this, con = this.con, g = "getAttribute";    // Shorties
+            var root = create("DIV", "dropdown-inner"),             // Contexts
+                func = (!search)? "walker": "finder",
+                args = (!search)? [con.sortItems, con.sortGroups]: [search, conf];
+
+            // Option Walker
+            this._query = (typeof search === "string")? search: false;
+            while(item = this.options[func].apply(this.options, args)){
+                if(!ul || (ul && ul[g]("data-group") !== item.group)){
+                    tp = (con.cbLoopGroup || this.cbGroup).call(this, item.group, search, root);
+                    if(tp instanceof Element){
+                        ul = tp;
+                        ul.setAttribute("data-group", item.group);
+                        root.appendChild(ul);
+                    } else { break; }
+                }
 
-                optionCheckboxes.forEach((checkbox) => {
-                    checkbox.checked = isChecked;
-                    updateOriginalOptionState(originalSelect, checkbox);
+                // Create Item
+                if((li = (con.cbLoopItem || this.cbItem).call(this, item, ul, search, root)) === null){
+                    continue;
+                }
+                if(li === false){ break; }
+                li.setAttribute("data-key", item.key);
+                li.setAttribute("data-group", item.group);
+                li.addEventListener("click", function(event){
+                    if(!this.hasAttribute("data-key")){ return false; }
+                    var key = this[g]("data-key"), group = this[g]("data-group") || "#";
+                    if(self.options.toggle.call(self.options, key, group)){
+                        if(self.con.stayOpen === false && !self.con.multiple){
+                            self.close.call(self, self.con.animate);
+                        }
+                    }
                 });
+                ul.appendChild(li);
+            }
+
+            // Empty
+            var count = root.querySelectorAll("*[data-key]").length;
+            if(count == 0){
+                (this.con.cbEmpty || function(element){
+                    var li = create("SPAN", "dropdown-empty");
+                    li.innerText = this._e("empty");
+                    element.appendChild(li);
+                }).call(this, root, search);
             }
 
-            function uncheckAll(originalSelect) {
-                const optionCheckboxes = nestedList.querySelectorAll(
-                    'input[type="checkbox"]'
-                );
+            // Select All
+            if(count > 0 && con.multiple && con.multiLimit == Infinity && con.multiSelectAll){
+                a1 = create("BUTTON", "tail-all"), a2 = create("BUTTON", "tail-none");
+                a1.innerText = this._e("all");
+                a1.addEventListener("click", function(event){
+                    event.preventDefault();
+                    var options = self.dropdown.querySelectorAll(".dropdown-inner .dropdown-option");
+                    self.options.walk.call(self.options, "select", options);
+                })
+                a2.innerText = this._e("none");
+                a2.addEventListener("click", function(event){
+                    event.preventDefault();
+                    var options = self.dropdown.querySelectorAll(".dropdown-inner .dropdown-option");
+                    self.options.walk.call(self.options, "unselect", options);
+                })
+
+                // Add Element
+                li = create("SPAN", "dropdown-action");
+                li.appendChild(a1);
+                li.appendChild(a2);
+                root.insertBefore(li, root.children[0]);
+            }
 
-                optionCheckboxes.forEach((checkbox) => {
-                    checkbox.checked = false;
-                    updateOriginalOptionState(originalSelect, checkbox);
+            // Add and Return
+            var data = this.dropdown.querySelector(".dropdown-inner");
+            this.dropdown[(data? "replace": "append") + "Child"](root, data);
+            if(cHAS(this.select, "active")){
+                this.calc();
+            }
+            return this.updateCSV().updateLabel();
+        },
+
+        /*
+         |  API :: CALLBACK -> CREATE GROUP
+         |  @since  0.5.8 [0.4.0]
+         */
+        cbGroup: function(group, search){
+            var ul = create("UL", "dropdown-optgroup"), self = this, a1, a2;
+            if(group == "#"){ return ul; }
+            ul.innerHTML = '<li class="optgroup-title"><b>' + group + '</b></li>';
+            if(this.con.multiple && this.con.multiLimit == Infinity && this.con.multiSelectAll){
+                a1 = create("BUTTON", "tail-none"), a2 = create("BUTTON", "tail-all");
+                a1.innerText = this._e("none");
+                a1.addEventListener("click", function(event){
+                    event.preventDefault();
+                    var grp = this.parentElement.parentElement.getAttribute("data-group");
+                    self.options.all.call(self.options, "unselect", grp);
+                });
+                a2.innerText = this._e("all");
+                a2.addEventListener("click", function(event){
+                    event.preventDefault();
+                    var grp = this.parentElement.parentElement.getAttribute("data-group");
+                    self.options.all.call(self.options, "select", grp);
                 });
+                ul.children[0].appendChild(a1);
+                ul.children[0].appendChild(a2);
+            }
+            return ul;
+        },
+
+        /*
+         |  API :: CALLBACK -> CREATE ITEM
+         |  @since  0.5.13 [0.4.0]
+         */
+        cbItem: function(item, optgroup, search){
+            var li = create("LI", "dropdown-option" + (item.selected? " selected": "") + (item.disabled? " disabled": ""));
+
+            // Inner Text
+            if(search && search.length > 0 && this.con.searchMarked){
+                search = this.options.applyLinguisticRules(search);
+                li.innerHTML = item.value.replace(new RegExp("(" + search + ")", "i"), "<mark>$1</mark>");
+            } else {
+                li.innerText = item.value;
+            }
 
-                // Uncheck the original <select> options
-                const originalOptions = originalSelect.getElementsByTagName(
-                    "option"
-                );
-                for (let i = 0; i < originalOptions.length; i++) {
-                    originalOptions[i].selected = false;
+            // Inner Description
+            if(this.con.descriptions && item.description){
+                li.innerHTML += '<span class="option-description">' + item.description + '</span>';
+            }
+            return li;
+        },
+
+        /*
+         |  API :: UPDATE EVERYTHING
+         |  @since  0.5.0 [0.5.0]
+         */
+        update: function(item){
+            return this.updateLabel().updateContainer(item).updatePin(item).updateCSV(item);
+        },
+
+        /*
+         |  API :: UPDATE LABEL
+         |  @since  0.5.8 [0.5.0]
+         */
+        updateLabel: function(label){
+            if(this.container == this.label && this.options.selected.length > 0){
+                if(this.label.querySelector(".label-inner")){
+                    this.label.removeChild(this.label.querySelector(".label-inner"));
+                }
+                if(this.label.querySelector(".label-count")){
+                    this.label.removeChild(this.label.querySelector(".label-count"));
                 }
+                return this;
             }
-
-            function toggleOption(checkbox) {
-                if (originalSelect.multiple) {
-                    updateOriginalOptionState(originalSelect, checkbox);
+            var c = this.con, len = this.options.selected.length, limit;
+            if(typeof label !== "string"){
+                if(c.disabled){
+                    label = "disabled";
+                } else if(this.dropdown.querySelectorAll("*[data-key]").length == 0){
+                    label = "empty" + (cHAS(this.select, "in-search")? "Search": "");
+                } else if(c.multiLimit <= len){
+                    label = "limit";
+                } else if(!c.multiple && this.options.selected.length > 0){
+                    label = this.options.selected[0].innerText;
+                } else if(typeof c.placeholder === "string"){
+                    label = c.placeholder;
                 } else {
-                    // For single-select, uncheck all and check the current one
-                    const optionCheckboxes = nestedList.querySelectorAll(
-                        '.tail--nested-dropdown-item input[type="checkbox"]'
-                    );
-                    optionCheckboxes.forEach((cb) => (cb.checked = false));
-                    checkbox.checked = true;
-                    updateOriginalOptionState(originalSelect, checkbox);
-                }
-            }
-
-            function toggleOptgroup(optgroupCheckbox) {
-                const isChecked = optgroupCheckbox.checked;
-                const nestedOptionsList = optgroupCheckbox
-                    .closest(".tail--optgroup")
-                    .querySelector(".tail--nested-dropdown-list");
-                const optionCheckboxes = nestedOptionsList.querySelectorAll(
-                    'input[type="checkbox"]'
-                );
-
-                optionCheckboxes.forEach((checkbox) => {
-                    checkbox.checked = isChecked;
-                    toggleOption(checkbox); // Call toggleOption for individual options
-                });
-
-                if (!originalSelect.multiple) {
-                    // For single-select, uncheck all other checkboxes in the same optgroup
-                    const customDropdown = originalSelect.closest(
-                        ".tail-select"
-                    );
-                    if (customDropdown) {
-                        const otherOptgroupCheckboxes = customDropdown.querySelectorAll(
-                            '.tail--nested-dropdown-item input[type="checkbox"]'
-                        );
-
-                        otherOptgroupCheckboxes.forEach((cb) => {
-                            if (cb !== optgroupCheckbox) {
-                                cb.checked = false;
-                                updateOriginalOptionState(originalSelect, cb);
-                            }
-                        });
-                    }
+                    label = "placeholder" + (c.multiple && c.multiLimit < Infinity? "Multi": "");
                 }
-
-                updateOriginalOptionState(originalSelect, optgroupCheckbox);
             }
 
-            function attachOptionCheckboxListeners() {
-                const optionCheckboxes = nestedList.querySelectorAll(
-                    '.tail--nested-dropdown-item input[type="checkbox"]'
-                );
+            // Set HTML
+            label = this._e(label, {":limit": c.multiLimit}, label);
+            label = '<span class="label-inner">' + label + '</span>',
+            limit = (c.multiShowLimit && c.multiLimit < Infinity);
+            if(c.multiple && c.multiShowCount){
+                label = '<span class="label-count">:c</span>' + label;
+                label = label.replace(":c", len + (limit? (" / " + c.multiLimit): ""));
+            }
+            this.label.innerHTML = label;
+            return this;
+        },
+
+        /*
+         |  API :: UPDATE CONTAINER
+         |  @since  0.5.0 [0.5.0]
+         */
+        updateContainer: function(item){
+            if(!this.container || !this.con.multiContainer){
+                return this;
+            }
+            var s = "[data-group='" + item.group + "'][data-key='" + item.key + "']";
+            if(this.container.querySelector(s)){
+                if(!item.selected){
+                    this.container.removeChild(this.container.querySelector(s));
+                }
+                return this;
+            }
 
-                optionCheckboxes.forEach((checkbox) => {
-                    checkbox.addEventListener("change", () =>
-                        toggleOption(checkbox)
-                    );
+            // Create Item
+            if(item.selected){
+                var self = this, hndl = create("DIV", "select-handle");
+                hndl.innerText = item.value;
+                hndl.setAttribute("data-key", item.key);
+                hndl.setAttribute("data-group", item.group);
+                hndl.addEventListener("click", function(event){
+                    event.preventDefault();
+                    event.stopPropagation();
+                    var key = this.getAttribute("data-key"), grp = this.getAttribute("data-group");
+                    self.options.unselect.call(self.options, key, grp);
                 });
+                this.container.appendChild(hndl);
+            }
+            return this;
+        },
+
+        /*
+         |  API :: UPDATE PIN POSITION
+         |  @since  0.5.3 [0.5.0]
+         */
+        updatePin: function(item){
+            var inner = this.dropdown.querySelector(".dropdown-inner ul"),
+                option = "li[data-key='" + item.key + "'][data-group='" + item.group + "']";
+            if(!this.con.multiPinSelected || !inner || this._query !== false){
+                return this;
             }
 
-            function updateOriginalOptionState(
-                originalSelect,
-                checkbox,
-                customDropdown
-            ) {
-                const optionValue = checkbox.value;
-                const option = Array.from(originalSelect.options).find(
-                    (opt) =>
-                        opt.value === optionValue ||
-                        opt.textContent === optionValue
-                );
-
-                if (option) {
-                    if (checkbox.checked) {
-                        option.selected = true;
-                    } else {
-                        option.selected = false;
+            // Create Item
+            option = this.dropdown.querySelector(option);
+            if(item.selected){
+                inner.insertBefore(option, inner.children[0]);
+            } else {
+                var grp = this.dropdown.querySelector("ul[data-group='" + item.group + "']"),
+                    prev = this.options[item.index-1], found = false;
+                while(prev && prev.group == item.group){
+                    if(found = grp.querySelector("li[data-key='" + prev.key + "']")){
+                        break;
                     }
-
-                    // Trigger change event for the original select
-                    const event = new Event("change", { bubbles: true });
-                    originalSelect.dispatchEvent(event);
+                    prev = this.options[prev.index-1];
                 }
-
-                // Get all selected options
-                const selectedOptions = Array.from(
-                    originalSelect.options
-                ).filter((opt) => opt.selected);
-
-                // Update the search input value with the selected option text
-                if (!originalSelect.multiple) {
-                    if (selectedOptions.length > 0 && searchInput) {
-                        searchInput.value = selectedOptions[0].textContent;
-                    } else {
-                        searchInput.value = ""; // Clear the search input if no option is selected
-                    }
+                if(found && found.nextElementSibling){
+                    grp.insertBefore(option, found.nextElementSibling);
                 } else {
-                    // Update searchInput value with selected options
-                    searchInput.value = selectedOptions
-                        .map((opt) => opt.textContent)
-                        .join(", ");
-                }
-
-                if (opts.multiTags) {
-                    if (originalSelect.multiple) {
-                        // Update the selected options list
-                        updateSelectedOptionsList(
-                            selectedOptionsList,
-                            selectedOptions
-                        );
+                    grp.appendChild(option);
+                }
+            }
+            return this;
+        },
+
+        /*
+         |  API :: UPDATE CSV INPUT
+         |  @since  0.5.0 [0.5.0]
+         */
+        updateCSV: function(item){
+            if(!this.csvInput || !this.con.csvOutput){
+                return this;
+            }
+            for(var selected = [], l = this.options.selected.length, i = 0; i < l; i++){
+                selected.push(this.options.selected[i].value);
+            }
+            this.csvInput.value = selected.join(this.con.csvSeparator || ",");
+            return this;
+        },
+
+        /*
+         |  PUBLIC :: OPEN DROPDOWN
+         |  @since  0.5.0 [0.3.0]
+         */
+        open: function(animate){
+            if(cHAS(this.select, "active") || cHAS(this.select, "idle") || this.con.disabled){
+                return false;
+            }
+            this.calc();
+
+            // Final Function
+            var final = function(){
+                cADD(self.select, "active");
+                cREM(self.select, "idle");
+                this.dropdown.style.height = "auto";
+                this.dropdown.style.overflow = "visible";
+                this.label.removeAttribute("style");
+                if(this.con.search && this.con.searchFocus){
+                    this.dropdown.querySelector("input").focus();
+                }
+                this.trigger.call(this, "open");
+            }, self = this, e = this.dropdown.style;
+
+            // Open
+            if(animate !== false){
+                this.label.style.zIndex = 25;
+                this.dropdown.style.cssText += "height:0;display:block;overflow:hidden;";
+                cADD(self.select, "idle");
+                (function animate(){
+                    var h = parseInt(e.height, 10), m = parseInt(e.maxHeight, 10);
+                    if(h >= m){
+                        return final.call(self);
+                    }
+                    e.height = ((h+50 > m)? m: h+50) + "px";
+                    setTimeout(animate, 20);
+                })();
+            } else {
+                e.cssText = "height:" + e.maxHeight + ";display:block;overflow:hidden;";
+                final.call(this);
+            }
+            return this;
+        },
+
+        /*
+         |  PUBLIC :: CLOSE DROPDOWN
+         |  @since  0.5.0 [0.3.0]
+         */
+        close: function(animate){
+            if(!cHAS(this.select, "active") || cHAS(this.select, "idle")){
+                return false;
+            }
+            var final = function(){
+                cREM(this.select, "active");
+                cREM(this.select, "idle");
+                this.dropdown.removeAttribute("style");
+                this.dropdown.querySelector(".dropdown-inner").removeAttribute("style");
+                this.trigger.call(this, "close");
+            }, self = this, e = this.dropdown;
+
+            // Close
+            if(animate !== false){
+                cADD(this.select, "idle");
+                this.dropdown.style.overflow = "hidden";
+                (function animate(){
+                    if((parseInt(e.offsetHeight, 10)-50) <= 0){
+                        return final.call(self);
                     }
+                    e.style.height = (parseInt(e.offsetHeight, 10)-50) + "px";
+                    setTimeout(animate, 20);
+                })();
+            } else {
+                final.call(this);
+            }
+            return this;
+        },
+
+        /*
+         |  PUBLIC :: TOGGLE DROPDOWN
+         |  @since  0.5.0 [0.3.0]
+         */
+        toggle: function(animate){
+            if(cHAS(this.select, "active")){
+                return this.close(animate);
+            }
+            return !cHAS(this.select, "idle")? this.open(animate): this;
+        },
+
+        /*
+         |  PUBLIC :: REMOVE SELECT
+         |  @since  0.5.3 [0.3.0]
+         */
+        remove: function(){
+            this.e.removeAttribute("data-tail-select");
+            if(this.e.hasAttribute("data-select-hidden")){
+                if(this.e.getAttribute("data-select-hidden") == "0"){
+                    this.e.style.removeProperty("display");
                 }
-
-                // Convert selected options to an array of values
-                const selectedValues = selectedOptions.map((opt) => opt.value);
-                // Log the selected values to the console
-                // console.log(selectedValues);
-
-                var options = originalSelect.options,
-                    count = 0;
-                for (var i = 0; i < options.length; i++) {
-                    if (options[i].selected) count++;
+                this.e.removeAttribute("data-select-hidden");
+            }
+            Array.prototype.map.call(this.e.querySelectorAll("[data-select-option='add']"), function(item){
+                item.parentElement.removeChild(item);
+            })
+            Array.prototype.map.call(this.e.querySelectorAll("[data-select-optgroup='add']"), function(item){
+                item.parentElement.removeChild(item);
+            })
+            this.e.name = (this.csvInput.hasAttribute("name"))? this.csvInput.name: this.e.name;
+            if(this.select.parentElement){
+                this.select.parentElement.removeChild(this.select);
+            }
+            if(this.container){
+                var handles = this.container.querySelectorAll(".select-handle");
+                for(var l = handles.length, i = 0; i < l; i++){
+                    this.container.removeChild(handles[i]);
                 }
+            }
+            return this;
+        },
+
+        /*
+         |  PUBLIC :: RELOAD SELECT
+         |  @since  0.5.0 [0.3.0]
+         */
+        reload: function(){
+            return this.remove().init();
+        },
+
+        /*
+         |  PUBLIC :: GET|SET CONFIG
+         |  @since  0.5.15 [0.4.0]
+         */
+        config: function(key, value, rebuild){
+            if(key instanceof Object){
+                for(var k in key){ this.config(k, key[k], false); }
+                return this.reload()? this.con: this.con;
+            }
+            if(key === void 0){
+                return this.con;
+            } else if(!(key in this.con)){
+                return false;
+            }
 
-                if (opts.multiCounter) {
-                    // Update the counter element
-                    let customId = originalSelect.id;
-                    if (customId) {
-                        let counterElement = document
-                            .querySelector(`.${customId}`)
-                            .querySelector(".tail--counter");
+            // Set | Return
+            if(value === void 0){
+                return this.con[key];
+            }
+            this.con[key] = value;
+            if(rebuild !== false){
+                this.reload();
+            }
+            return this;
+        },
+        enable: function(update){
+            cREM(this.select, "disabled");
+            this.e.disabled = false;
+            this.con.disabled = false;
+            return (update === false)? this: this.reload();
+        },
+        disable: function(update){
+            cADD(this.select, "disabled");
+            this.e.disabled = true;
+            this.con.disabled = true;
+            return (update === false)? this: this.reload();
+        },
+
+        /*
+         |  PUBLIC :: CUSTOM EVENT LISTENER
+         |  @since  0.5.0 [0.4.0]
+         */
+        on: function(event, callback, args){
+            if(["open", "close", "change"].indexOf(event) < 0 || typeof callback !== "function"){
+                return false;
+            }
+            if(!(event in this.events)){
+                this.events[event] = [];
+            }
+            this.events[event].push({cb: callback, args: (args instanceof Array)? args: []});
+            return this;
+        },
+
+        /*
+         |  PUBLIC :: VALUE
+         |  @since  0.5.13 [0.5.13]
+         */
+        value: function(){
+            if(this.options.selected.length == 0){
+                return null;
+            }
+            if(this.con.multiple){
+                return this.options.selected.map(function(opt){
+                    return opt.value;
+                });
+            }
+            return this.options.selected[0].value;
+        }
+    };
+
+    /*
+     |  OPTIONS CONSTRUCTOR
+     |  @since  0.5.12 [0.3.0]
+     */
+    options = select.options = function(select, parent){
+        if(!(this instanceof options)){
+            return new options(select, parent);
+        }
+        this.self = parent;
+        this.element = select;
+        this.length = 0;
+        this.selected = [];
+        this.disabled = [];
+        this.items = {"#": {}};
+        this.groups = {};
+        return this;
+    }
 
-                        if (counterElement) {
-                            counterElement.textContent = count;
-                        }
-                    }
+    /*
+     |  TAIL.OPTIONS HANDLER
+     */
+    options.prototype = {
+        /*
+         |  INTERNAL :: REPLACE TYPOs
+         |  @since  0.5.0 [0.3.0]
+         */
+        _r: function(state){
+            return state.replace("disabled", "disable").replace("enabled", "enable")
+                        .replace("selected", "select").replace("unselected", "unselect");
+        },
+
+        /*
+         |  GET AN EXISTING OPTION
+         |  @since  0.5.7 [0.3.0]
+         */
+        get: function(key, grp){
+            var g = "getAttribute";
+            if(typeof key === "object" && key.key && key.group){
+                grp = key.group || grp;
+                key = key.key;
+            } else if(key instanceof Element){
+                if(key.tagName == "OPTION"){
+                    grp = key.parentElement.label || "#";
+                    key = key.value || key.innerText;
+                } else if(key.hasAttribute("data-key")){
+                    grp = key[g]("data-group") || key.parentElement[g]("data-group") || "#";
+                    key = key[g]("data-key");
                 }
+            } else if(typeof key !== "string"){
+                return false;
             }
+            key = (/^[0-9]+$/.test(key))? "_" + key: key;
+            return (grp in this.items)? this.items[grp][key]: false;
+        },
+
+        /*
+         |  SET AN EXISTING OPTION
+         |  @since  0.5.15 [0.3.0]
+         */
+        set: function(opt, rebuild){
+            var key = opt.value || opt.innerText, grp = opt.parentElement.label || "#";
+            if(!(grp in this.items)){
+                this.items[grp] = {};
+                this.groups[grp] = opt.parentElement;
+            }
+            if(key in this.items[grp]){
+                return false;
+            }
+            var id = (/^[0-9]+$/.test(key))? "_" + key: key;
 
-            function filterOptions(originalSelect, searchInput) {
-                const searchTerm = searchInput.value.trim().toLowerCase();
-                const optionItems = nestedList.querySelectorAll("div");
+            // Validate Selection
+            var con = this.self.con;
+            if(con.multiple && this.selected.length >= con.multiLimit){
+                opt.selected = false;
+            }
+            if(opt.selected && con.deselect && (!opt.hasAttribute("selected") || con.multiLimit == 0)){
+                opt.selected = false;
+                opt.parentElement.selectedIndex = -1;
+            }
 
-                optionItems.forEach((optionItem) => {
-                    const optionCheckbox = optionItem.querySelector(
-                        'input[type="checkbox"]'
-                    );
-                    const optionLabel = optionCheckbox.nextElementSibling.textContent.toLowerCase();
-                    const optgroupItem = optionItem.closest("div");
+            // Sanitize Description
+            if(opt.hasAttribute("data-description")){
+                var span = create("SPAN");
+                    span.innerHTML = opt.getAttribute("data-description");
+                opt.setAttribute("data-description", span.innerHTML);
+            }
 
-                    // Hide or show options based on the search term
-                    optionCheckbox.style.display = optionLabel.includes(
-                        searchTerm
-                    )
-                        ? "inline-block"
-                        : "none";
-                });
+            // Add Item
+            this.items[grp][id] = {
+                key: key,
+                value: opt.text,
+                description: opt.getAttribute("data-description") || null,
+                group: grp,
+                option: opt,
+                optgroup: (grp != "#")? this.groups[grp]: undefined,
+                selected: opt.selected,
+                disabled: opt.disabled,
+                hidden: opt.hidden || false
+            };
+            this.length++;
+            if(opt.selected){ this.select(this.items[grp][id]); }
+            if(opt.disabled){ this.disable(this.items[grp][id]); }
+            return (rebuild)? this.self.callback(this.items[grp][key], "rebuild"): true;
+        },
+
+        /*
+         |  CREATE A NEW OPTION
+         |  @since  0.5.13 [0.3.0]
+         */
+        add: function(key, value, group, selected, disabled, description, rebuild){
+            if(key instanceof Object){
+                for(var k in key){
+                    this.add(key[k].key || k, key[k].value, key[k].group, key[k].selected, key[k].disabled, key[k].description, false);
+                }
+                return this.self.query();
+            }
+            if(this.get(key, group)){
+                return false;
+            }
 
-                optionItems.forEach((optionItem) => {
-                    const optionCheckbox = optionItem.querySelector(
-                        'input[type="checkbox"]'
-                    );
-                    const optgroupItem = optionItem.closest("div");
-
-                    // Check if there are visible checkboxes within the nested list
-                    const nestedCheckboxes = optionItem.querySelectorAll(
-                        'div input[type="checkbox"]:not([style="display: none;"])'
-                    );
-                    const hasVisibleNestedCheckboxes =
-                        nestedCheckboxes.length > 0;
-
-                    // Show the parent li only if the checkbox or a visible nested checkbox is present
-                    optgroupItem.style.display =
-                        optionCheckbox.style.display === "inline-block" ||
-                            hasVisibleNestedCheckboxes
-                            ? "block"
-                            : "none";
-                });
+            // Check Group
+            group = (typeof group === "string")? group: "#";
+            if(group !== "#" && !(group in this.groups)){
+                var optgroup = create("OPTGROUP");
+                optgroup.label = group;
+                optgroup.setAttribute("data-select-optgroup", "add");
+                this.element.appendChild(optgroup);
+                this.items[group] = {};
+                this.groups[group] = optgroup;
             }
 
-            function updateSelectedOptionsList(
-                selectedOptionsList,
-                selectedOptions
-            ) {
-                // Clear existing list items
-                selectedOptionsList.innerHTML = "";
+            // Validate Selection
+            if(this.self.con.multiple && this.selected.length >= this.self.con.multiLimit){
+                selected = false;
+            }
+            disabled = !!disabled;
+
+            // Create Option
+            var option = d.createElement("OPTION");
+            option.value = key;
+            option.selected = selected;
+            option.disabled = disabled;
+            option.innerText = value;
+            option.setAttribute("data-select-option", "add");
+            if(description && description.length > 0){
+                option.setAttribute("data-description", description);
+            }
 
-                // Create list items for each selected option
-                selectedOptions.forEach((opt) => {
-                    const listItem = document.createElement("li");
-                    listItem.textContent = opt.textContent;
-                    selectedOptionsList.appendChild(listItem);
-                });
+            // Add Option and Return
+            ((group == "#")? this.element: this.groups[group]).appendChild(option);
+            return this.set(option, rebuild);
+        },
+
+        /*
+         |  MOVE AN EXISTING OPTION
+         |  @since  0.5.0 [0.5.0]
+         */
+        move: function(item, group, new_group, rebuild){
+            if(!(item = this.get(item, group))){ return false; }
+
+            // Create Group
+            if(new_group !== "#" && !(new_group in this.groups)){
+                var optgroup = create("OPTGROUP");
+                optgroup.label = new_group;
+                this.element.appendChild(optgroup);
+                this.items[new_group] = {};
+                this.groups[new_group] = optgroup;
+                this.groups[new_group].appendChild(item.option);
             }
 
-            function updateCustomTextInput(originalSelect) {
-                // Get all selected options
-                const selectedOptions = Array.from(originalSelect.options).filter((opt) => {
-                    // Check if the option is selected and has the 'selected' attribute
-                    return opt.selected && opt.hasAttribute('selected');
-                });
+            // Move To Group
+            delete this.items[item.group][item.key];
+            item.group = new_group;
+            item.optgroup = this.groups[new_group] || undefined;
+            this.items[new_group][item.key] = item;
+            return (rebuild)? this.self.query(): true;
+        },
+
+        /*
+         |  REMOVE AN EXISTING OPTION
+         |  @since  0.5.7 [0.3.0]
+         */
+        remove: function(item, group, rebuild){
+            if(!(item = this.get(item, group))){ return false; }
+            if(item.selected){ this.unselect(item); }
+            if(item.disabled){ this.enable(item); }
+
+            // Remove Data
+            item.option.parentElement.removeChild(item.option);
+            var id = (/^[0-9]+$/.test(item.key))? "_" + item.key: item.key;
+            delete this.items[item.group][id];
+            this.length--;
+
+            // Remove Optgroup
+            if(Object.keys(this.items[item.group]).length === 0){
+                delete this.items[item.group];
+                delete this.groups[item.group];
+            }
+            return (rebuild)? this.self.query(): true;
+        },
+
+        /*
+         |  CHECK AN EXISTING OPTION
+         |  @since  0.5.0 [0.3.0]
+         */
+        is: function(state, key, group){
+            var state = this._r(state), item = this.get(key, group);
+            if(!item || ["select", "unselect", "disable", "enable"].indexOf(state) < 0){
+                return null;
+            }
+            if(state == "disable" || state == "enable"){
+                return (state == "disable")? item.disabled: !item.disabled;
+            } else if(state == "select" || state == "unselect"){
+                return (state == "select")? item.selected: !item.selected;
+            }
+            return false;
+        },
+
+        /*
+         |  INTERACT WITH AN OPTION
+         |  @since  0.5.3 [0.3.0]
+         */
+        handle: function(state, key, group, _force){
+            var item = this.get(key, group), state = this._r(state);
+            if(!item || ["select", "unselect", "disable", "enable"].indexOf(state) < 0){
+                return null;
+            }
 
+            // Disable || Enable
+            if(state == "disable" || state == "enable"){
+                if(!(item.option in this.disabled) && state == "disable"){
+                    this.disabled.push(item.option);
+                } else if((item.option in this.disabled) && state == "enable"){
+                    this.disabled.splice(this.disabled.indexOf(item.option), 1);
+                }
+                item.disabled = (state == "disable");
+                item.option.disabled = (state == "disable");
+                return this.self.callback.call(this.self, item, state);
+            }
 
-                // Update the search input value with the selected option text
-                if (!originalSelect.multiple) {
-                    if (selectedOptions.length > 0 && searchInput) {
-                        searchInput.value = selectedOptions[0].textContent;
-                    } else {
-                        searchInput.value = ""; // Clear the search input if no option is selected
+            // Select || Unselect
+            var dis = (cHAS(this.self.select, "disabled") || item.disabled || item.option.disabled),
+                lmt = (this.self.con.multiple && this.self.con.multiLimit <= this.selected.length),
+                sgl = (!this.self.con.multiple && this.selected.indexOf(item.option) > 0),
+                del = (this.self.con.multiLimit == 0 && this.self.con.deselect == true),
+                uns = (!this.self.con.multiple && !this.self.con.deselect && _force !== true);
+            if(state == "select"){
+                if(dis || lmt || del || sgl){
+                    return false;
+                }
+                if(!this.self.con.multiple){
+                    for(var i in this.selected){
+                        this.unselect(this.selected[i], undefined, true);
                     }
+                }
+                if(this.selected.indexOf(item.option) < 0){
+                    this.selected.push(item.option);
+                }
+            } else if(state == "unselect"){
+                if(dis || uns){
+                    return false;
+                }
+                this.selected.splice(this.selected.indexOf(item.option), 1);
+            }
+            item.selected = (state == "select");
+            item.option.selected = (state == "select");
+            item.option[(state.length > 6? "remove": "set") + "Attribute"]("selected", "selected");
+            return this.self.callback.call(this.self, item, state, _force);
+        },
+        enable: function(key, group){
+            return this.handle("enable", key, group, false);
+        },
+        disable: function(key, group){
+            return this.handle("disable", key, group, false);
+        },
+        select: function(key, group){
+            return this.handle("select", key, group, false);
+        },
+        unselect: function(key, group, _force){
+            return this.handle("unselect", key, group, _force);
+        },
+        toggle: function(item, group){
+            if(!(item = this.get(item, group))){ return false; }
+            return this.handle((item.selected? "unselect": "select"), item, group, false);
+        },
+
+        /*
+         |  INVERT CURRENT <STATE>
+         |  @since  0.5.15 [0.3.0]
+         */
+        invert: function(state){
+            state = this._r(state);
+            if(["enable", "disable"].indexOf(state) >= 0){
+                var invert = this.disabled, action = (state == "enable")? "disable": "enable";
+            } else if(["select", "unselect"].indexOf(state) >= 0){
+                var invert = this.selected, action = (state == "select")? "unselect": "select";
+            }
+            var convert = Array.prototype.filter.call(this, function(element){
+                return !(element in invert);
+            }), self = this;
+
+            // Loop
+            [].concat(invert).forEach(function(item){
+                self.handle.call(self, action, item);
+            });
+            [].concat(convert).forEach(function(item){
+                self.handle.call(self, state, item);
+            });
+            return true;
+        },
+
+        /*
+         |  SET <STATE> ON ALL OPTIONs
+         |  @since  0.5.0 [0.5.0]
+         */
+        all: function(state, group){
+            var self = this, list = this;
+            if(group in this.items){
+                list = Object.keys(this.items[group]);
+            } else if(["unselect", "enable"].indexOf(state) >= 0){
+                list = [].concat((state == "unselect")? this.selected: this.disabled);
+            }
+            Array.prototype.forEach.call(list, function(item){
+                self.handle.call(self, state, item, group, false);
+            });
+            return true;
+        },
+
+        /*
+         |  SET <STATE> FOR A BUNCH OF OPTIONs
+         |  @since  0.5.4 [0.5.3]
+         */
+        walk: function(state, items, args){
+            if(items instanceof Array || items.length){
+                for(var l = items.length, i = 0; i < l; i++){
+                    this.handle.apply(this, [state, items[i], null].concat(args));
+                }
+            } else if(items instanceof Object){
+                var self = this;
+                if(items.forEach){
+                    items.forEach(function(value){
+                        self.handle.apply(self, [state, value, null].concat(args));
+                    });
                 } else {
-                    // Update searchInput value with selected options
-                    searchInput.value = selectedOptions
-                        .map((opt) => opt.textContent)
-                        .join(", ");
-                }
-
-                if (opts.multiTags) {
-                    if (originalSelect.multiple) {
-                        // Update the selected options list
-                        updateSelectedOptionsList(
-                            selectedOptionsList,
-                            selectedOptions
-                        );
+                    for(var key in items){
+                        if(typeof items[key] !== "string" && typeof items[key] !== "number" && !(items[key] instanceof Element)){
+                            continue;
+                        }
+                        this.handle.apply(this, [state, items[key], (key in this.items? key: null)]).concat(args);
                     }
                 }
             }
+            return this;
+        },
+
+        /*
+         |  APPLY LINGUSTIC RULES
+         |  @since  0.5.13 [0.5.13]
+         */
+        applyLinguisticRules: function(search, casesensitive){
+            var rules = this.self.con.linguisticRules, values = [];
+
+            // Prepare Rules
+            Object.keys(rules).forEach(function(key){
+                values.push("(" + key + "|[" + rules[key] + "])");
+            });
+            if(casesensitive){
+                values = values.concat(values.map(function(s){ return s.toUpperCase(); }));
+            }
 
+            return search.replace(new RegExp(values.join("|"), (casesensitive)? "g": "ig"), function(m){
+                return values[[].indexOf.call(arguments, m, 1) - 1];
+            });
+        },
 
-            function updateCounter(originalSelect) {
-                // Get the custom ID for the current original select
-                let customId = originalSelect.id;
-
-                if (customId) {
-                    // Get the counter element
-                    let counterElement = document
-                        .querySelector(`.${customId}`)
-                        .querySelector(".tail--counter");
 
-                    if (counterElement) {
-                        // Get the count of selected options
-                        const count = Array.from(originalSelect.options).filter(
-                            (opt) => opt.selected
-                        ).length;
+        /*
+         |  FIND SOME OPTIONs - ARRAY EDITION
+         |  @since  0.5.15 [0.3.0]
+         */
+        find: function(search, config){
+            var self = this, matches, has = {};
 
-                        // Update the counter element
-                        counterElement.textContent = count;
-                    }
-                }
+            // Get Config
+            if(!config){
+                config = this.self.con.searchConfig;
             }
 
-            function toggleDropdownVisibility() {
-                nestedList.style.display = "block";
-                customDropdown.setAttribute("aria-expanded", "true");
+            // Config Callback
+            if(typeof config === "function"){
+                matches = config.bind(this, search);
             }
 
-            function hideDropdown() {
-                nestedList.style.display = "none";
-                customDropdown.setAttribute("aria-expanded", "false");
-            }
+            // Config Handler
+            else {
+                config = (config instanceof Array)? config: [config];
+                config.forEach(function(c){
+                    if(typeof c === "string"){ has[c] = true; }
+                });
+                has.any = (!has.any)? has.attributes && has.value: has.any;
 
-            function handleClickOutside(event) {
-                if (!customDropdown.contains(event.target)) {
-                    hideDropdown();
+                // Cleanup & Prepare
+                if(!has.regex || has.text){
+                    search = search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+                }
+                if(!has.exactglyphes){
+                    search = this.self.options.applyLinguisticRules(search, has.case);
+                }
+                if(has.word){
+                    search = '\\b' + search + '\\b';
                 }
-            }
 
-            function handleKeyDown(event) {
-                if (event.key === "Escape") {
-                    hideDropdown();
+                // Search
+                var regex = new RegExp(search, (!has.case)? "mi": "m"),
+                    sfunc = function(opt){ return regex.test(opt.text || opt.value); };
+
+                // Handle
+                if(has.any){
+                    matches = function(opt){ return sfunc(opt) || [].some.call(opt.attributes, sfunc); };
+                } else if(has.attributes){
+                    matches = function(opt){ return [].some.call(opt.attributes, sfunc); };
+                } else {
+                    matches = sfunc;
+                }
+
+                if(!this.self.con.searchDisabled){
+                    var temp = matches;
+                    matches = function(opt){ return !opt.disabled && temp(opt); };
                 }
             }
 
-            // Show the dropdown when the input field is focused
-            searchInput.addEventListener("focus", toggleDropdownVisibility);
+            // Hammer Time
+            return [].filter.call(this.self.e.options, matches).map(function(opt){
+                return opt.hidden? false: self.get(opt)
+            });
+        },
+
+        /*
+         |  FIND SOME OPTIONs - WALKER EDITION
+         |  @since  0.5.5 [0.3.0]
+         */
+        finder: function(search, config){
+            if(this._finderLoop === undefined){
+                this._finderLoop = this.find(search, config);
+            }
+            var item;
+            while((item = this._finderLoop.shift()) !== undefined){
+                return item;
+            }
+            delete this._finderLoop;
+            return false;
+        },
+
+        /*
+         |  NEW OPTIONS WALKER
+         |  @since  0.5.15 [0.4.0]
+         */
+        walker: function(orderi, orderg){
+            if(typeof this._inLoop !== "undefined" && this._inLoop){
+                if(this._inItems.length > 0){
+                    do {
+                        var temp = this.items[this._inGroup][this._inItems.shift()];
+                    } while(temp.hidden === true);
+                    return temp;
+                }
 
-            // Hide the dropdown when clicking outside of it
-            document.addEventListener("click", handleClickOutside);
+                // Sort Items
+                if(this._inGroups.length > 0){
+                    while(this._inGroups.length > 0){
+                        var group = this._inGroups.shift();
+                        if(!(group in this.items)){
+                            return false;
+                        }
 
-            // Hide the dropdown when pressing the ESC key
-            document.addEventListener("keydown", handleKeyDown);
+                        var keys = Object.keys(this.items[group]);
+                        if(keys.length > 0){
+                            break;
+                        }
+                    }
+                    if(orderi == "ASC"){
+                        keys.sort();
+                    } else if(orderi == "DESC"){
+                        keys.sort().reverse();
+                    } else if(typeof orderi === "function"){
+                        keys = orderi.call(this, keys);
+                    }
+                    this._inItems = keys;
+                    this._inGroup = group;
+                    return this.walker(null, null);
+                }
 
-            buildNestedList();
-        });
-    }
-};
+                // Delete and Exit
+                delete this._inLoop;
+                delete this._inItems;
+                delete this._inGroup;
+                delete this._inGroups;
+                return false;
+            }
+
+            // Sort Groups
+            var groups = Object.keys(this.groups) || [];
+            if(orderg == "ASC"){
+                groups.sort();
+            } else if(orderg == "DESC"){
+                groups.sort().reverse();
+            } else if(typeof orderg === "function"){
+                groups = orderg.call(this, groups);
+            }
+            groups.unshift("#");
+
+            // Init Loop
+            this._inLoop = true;
+            this._inItems = [];
+            this._inGroups = groups;
+            return this.walker(orderi, null);
+        }
+    };
+
+    // Return
+    return select;
+}));