website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

multiple-select-dropdown-option

Multiple Select Dropdown Option

  • 394
  • 18-Nov-2021
  • Details

    FILE STRUCTURE


    INDEX.HTML

    <!DOCTYPE html>

    <html lang="en">

    <head>

     

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <meta name="description" content="BVSelect Jquery">

      <meta name="author" content="Bruno Vieira">

     

      <title>BVSelect - VanillaJS Fully Customizable SelectBox</title>

     

      <!-- BVSelect Plugin Style -->

        <link rel="stylesheet" type="text/css" href="css/select.css">

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

     

    <!-- jQuery library -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

        <style>

          html,body {  font-family: 'Montserrat', sans-serif;  }

          .btn-light { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; border: 1px solid #ececec; }

          .card{

            padding: 25px 10px;

            color: white;

            border-radius: 0 !important;

          }

        </style>

     

    </head>

    <body >

       <div class="container mt-5">

        <div class="row">

          <div class="col-md-4 mb-5" >

            <div class="card h-100 bg-success" >

              <div >

              <h3>Basic:</h3>

                  <select id="selectbox">

                      <option value="pt_1">Option 1</option>

                      <option value="en_2" >Option 2 </option>

                      <option value="es_3" disabled>Option 3 (Disabled)</option>

                      <option value="ch_4">Option 4</option>

                      <option value="5">Option 5</option>

                  </select>

              </div>

            </div>

          </div>

          <div class="col-md-4 mb-5" >

            <div class="card h-100 bg-primary" >

              <div >

              <h3>Searchbox:</h3>

                  <select id="selectbox2">

                      <option value="pt_1">Cristiano Ronaldo</option>

                      <option value="en_2">Lionel Messi </option>

                      <option value="es_3" disabled>Neymar Jr. (Disabled)</option>

                      <option value="ch_4">Ronaldinho</option>

                      <option value="5">Luis Figo</option>

                  </select>

              </div>

            </div>

          </div>

          <div class="col-md-4 mb-5" >

            <div class="card h-100 bg-danger" >

              <div >

              <h3>Multiple:</h3>

                  <select id="selectbox6" multiple="">

                      <option data-icon="fa fa-align-justify" value="pt_1">Item 1</option>

                      <option data-icon="fa fa-address-book" value="en_2" >Item 2 </option>

                      <option data-icon="fa fa-hashtag" value="es_3" disabled>Item 3 (Disabled)</option>

                      <option data-icon="fa fa-beer" value="ch_4">Item 4</option>

                      <option data-icon="fa fa-air-freshener" value="5">Item 5</option>

                  </select>

              </div>

            </div>

          </div>

        </div>

     

        <div class="row">

          <div class="col-md-4 mb-5" >

            <div class="card h-100 bg-warning" >

              <div >

              <h3>Images:</h3>

                  <select id="selectbox3">

                      <option value="##" data-separator="true">Portugal</option>

                      <option data-img="https://img.icons8.com/color/2x/portugal.png" value="5">Luis Figo</option>

                      <option data-img="https://img.icons8.com/color/2x/portugal.png" value="pt_1">Cristiano Ronaldo</option>

                      <option value="##" data-separator="true">Argentina</option>                  

                      <option data-img="https://img.icons8.com/color/2x/argentina.png" value="en_2" >Lionel Messi </option>

                      <option value="##" data-separator="true">Brasil</option>

                      <option data-img="https://img.icons8.com/color/2x/brazil.png" value="es_3" disabled>Neymar Jr. (Disabled)</option>

                      <option data-img="https://img.icons8.com/color/2x/brazil.png" value="ch_4">Ronaldinho</option>

                  </select>

              </div>

            </div>

          </div>

          <div class="col-md-4 mb-5" >

            <div class="card h-100 bg-secondary" >

              <div >

              <h3>Icons:</h3>

                  <select id="selectbox4">

                      <option data-icon="fa fa-arrow-right" value="pt_1">Cristiano Ronaldo</option>

                      <option data-icon="fa fa-tshirt" value="en_2" >Lionel Messi </option>

                      <option data-icon="fa fa-futbol" value="es_3" disabled>Neymar Jr. (Disabled)</option>

                      <option data-icon="fa fa-chevron-circle-right" value="ch_4">Ronaldinho</option>

                      <option data-icon="fa fa-hashtag" value="5">Luis Figo</option>

                  </select>

              </div>

            </div>

          </div>

          <div class="col-md-4 mb-5" >

            <div class="card h-100 bg-success" >

              <div >

              <h3>Mixed:</h3>

                  <select id="selectbox5">

                      <option data-img="https://img.icons8.com/color/2x/portugal.png" value="pt_1">Cristiano Ronaldo</option>

                      <option data-icon="fa fa-address-book" data-img="https://img.icons8.com/color/2x/argentina.png" value="en_2" >Lionel Messi </option>

                      <option data-icon="fa fa-hashtag" value="es_3" disabled>Neymar Jr. (Disabled)</option>

                      <option data-img="https://img.icons8.com/color/2x/brazil.png" value="ch_4">Ronaldinho</option>

                      <option data-icon="fa fa-futbol" value="5">Luis Figo</option>

                  </select>

              </div>

            </div>

          </div>

        </div>

      </div>

      </div>

      <script src="js/bvselect.js"></script>

      <script>

      document.addEventListener("DOMContentLoaded", function() {

            var demo1 = new BVSelect({

              selector: "#selectbox",

              searchbox: false,

              offset: false

            });

            var demo2 = new BVSelect({

              selector: "#selectbox2",

              searchbox: true,

              search_autofocus: true,

              offset: true,

              width: "100%",

              placeholder: "Select Option",

              search_placeholder: "Search...",

              breakpoint: 750

            });

            var demo3 = new BVSelect({

              selector: "#selectbox3",

              searchbox: true,

              offset: true

            });

            var demo4 = new BVSelect({

              selector: "#selectbox4",

              searchbox: true,

              offset: true

            });

            var demo5 = new BVSelect({

              selector: "#selectbox5",

              searchbox: true,

              offset: true

            });    

            var demo6 = new BVSelect({

              selector: "#selectbox6",

              searchbox: true,

              search_autofocus: false,

              offset: true,

              width: "100%",

              search_placeholder: "Search..."

            });  

      });

     

      </script>

    </body>

     

    </html>

     

     

    SELECT.CSS

    .bv_mainselect {

        color: #fff;

        padding: 7px 5px 7px 5px;

        border-radius: 6px;

        font-size: 10pt

    }

    .bv_atual {

        color: #535353;

        font-size: 11pt;

        padding: 10px;

        border-radius: 0;

        cursor: pointer

    }

    .bv_disabled {

        background-color: #e6e6e6!important;

        cursor: default!important;

    }

    .bv_separator {

        font-weight: 700;

        color: #282828!important;

        cursor:default!important;

        background-color:transparent!important;

    }

    .bv_background {

        background-color: #fff

    }

    .arrow {

        border: solid grey;

        border-width: 0 3px 3px 0;

        display: inline-block;

        padding: 3px;

        float: right;

        pointer-events: none;

    }

    .up {

        transform: rotate(-135deg);

        -webkit-transform: rotate(-135deg);

        margin-top: 5px;

        transition: all .2s ease

    }

    .down {

        transition: all .2s ease;

        transform: rotate(45deg);

        -webkit-transform: rotate(45deg);

        margin-top: 2px

    }

     

    .bv_ul_mobile {

        width: 80% !important;

        position: fixed !important;

        top: 5% !important;

        left: 10% !important;

        border: 0px !important;

        height: 90% !important;

        margin: 0px !important;

        overflow-y: scroll;

        z-index: 10 !important;

        max-height:100%!important;

    }

     

    .bv_ul_bg

    {

        position: fixed;

        width: 100%;

        height: 100%;

        top: 0px;

        left: 0px;

        background-color: rgba(0, 0, 0, 0.8); z-index: 9;

    }

     

    .bv_ul_mobile li

    {

        padding:20px!important;

    }

     

    .stop-scrolling {

      height: 100%;

      overflow: hidden;

    }

     

    .bv_ul_inner {

        position: absolute;

        margin-top: 10px;

        padding: 0;

        display: none;

        border-radius: 0;

        display: none;

        z-index: 1;

        max-height: 400px;

        overflow-x: auto;

    }

     

    .bv_ul_inner li {

        cursor: pointer;

        list-style: none;

        color: #353535;

        padding: 5px 0 5px 9px;

        font-size: 10pt;

        padding: 12px 28px 10px 10px;

    }

     

    .bv_ul_inner i {

        color: #464646;

        font-size: 17pt;

        margin-right: 10px;

        float: left;

        margin-top: -1px;

        margin-left: 3px;

    }

     

    .bv_ul_inner li img{

        float: left;

        margin-right: 11px;

        position: relative;

        bottom: 6px;

        max-width: 30px; /* Change to fit your images */

    }

     

    .bv_ul_inner li input

    {

        padding: 0px;

        border: 0px;

            border-bottom-color: currentcolor;

            border-bottom-style: none;

            border-bottom-width: 0px;

        border-bottom-color: currentcolor;

        border-bottom-style: none;

        border-bottom-width: 0px;

        color: black;

        height: 38px;

        width: 100%;

        background-color: transparent;

        font-size: 10pt;

        font-weight: bold;

    }

    .bv_ul_inner li:hover {

        background-color: #eee

    }

    .nofocus

    {

        background-color: rgba(255, 255, 255, 0.1) !important;

        padding: 0px !important;

        border-bottom: 2px solid #e1e1e1;

    }

    .innerinput

    {

        padding: 0px 9px 0px 10px;

    }

    *:focus {

        outline: none!important;

    }

     

    BVSELECT.JS

    class BVSelect {

     

        constructor({

            selector = 'defaultId',

            width = "100%",

            searchbox = false,

            search_autofocus = false,

            offset = true,

            search_placeholder = "Search...",

            placeholder = "Select Option",

            breakpoint = "600"

        })

        {

     

            // Random Number generated

            var randomID = Math.floor(Math.random() * (9999 - 0 + 1)) + 0;

            var SearchPlaceholder = search_placeholder;

            var MainPlaceholder = placeholder;

            var selectedIDFocus = 0; // Save wich dropdown is currently open

            var selectedMultiple = [];

            var selected_option_text = "";

            var first_option_text = "";

            var MDivSelector = selector.substring(1);

     

            // Define Variables

            this.selector = selector.substring(1);

            this.searchbox = searchbox;

            this.width = width;

            this.offset = offset;

            this.randomID = randomID;

            this.search_placeholder;

            this.breakpoint = breakpoint;

            this.search_autofocus = search_autofocus;

     

            // Hides native selector

            document.getElementById(this.selector).style.display = "none";

     

            // ** ADD OPTIONS TO LIST **

            this.SetupListOptions = function() {

                // Get All options inside Selectbox

                var x = document.getElementById(this.selector);

                for (var i = 0; i < x.length; i++) {

     

                    var optionText = x[i].text;

                    var optionValue = x[i].value;

                    var optionDisabled = x[i].disabled;

                    var optionSeparator = x[i].getAttribute("data-separator");

                    var optionImg = x[i].getAttribute("data-img");

                    var optionIcon = x[i].getAttribute("data-icon");

     

                    // Option Disabled

                    if (optionDisabled == true) {

                        var is_disabled = "bv_disabled";

                    } else {

                        var is_disabled = "";

                    }

                    // Separator

                    if (optionSeparator) {

                        var is_separator = "bv_separator";

                    } else {

                        var is_separator = "";

                    }

                    // Check for Attachment  

                    if (optionImg) {

                        var has_attachment = "<img src=" + optionImg + ">";

                    } else {

                        if (optionIcon) {

                            var has_attachment = "<i class='" + optionIcon + "' aria-hidden='true'></i>";

                        } else {

                            var has_attachment = "";

                        }

                    }

     

                    // Append

                    document.getElementById("ul_" + randomID).insertAdjacentHTML('beforeend', "<li class='" + is_disabled + " " + is_separator + "'  > " + has_attachment + " " + optionText + "</li>");

                }

     

                document.querySelectorAll('#ul_' + randomID + ' li').forEach((item) => {

     

                    item.addEventListener('click', (e) => {

                        const index = Array.from(item.parentNode.children).indexOf((item))

                        var selected_option = document.getElementById(this.selector);

     

                        if (this.searchbox == true) {

                            var numberless = -1;

                        } else {

                            var numberless = "";

                        }

     

                        if (item.classList.contains("bv_disabled") || item.classList.contains("nofocus") || item.classList.contains("bv_separator")) {} else {

                            if (selected_option.attributes.multiple) {

                                var SelectedNames = "";

                                event.preventDefault();

     

                                if (selectedMultiple.indexOf(index) > -1) {

                                    var index_test = selectedMultiple.indexOf(index);

                                    selectedMultiple.splice(index_test, 1);

                                    document.getElementById(this.selector)[index + numberless].selected = false;

                                    item.style.backgroundColor = "transparent";

                                } else {

                                    selectedMultiple.push(index);

                                    item.style.backgroundColor = "#ececec";

                                } // Adds to array

     

                                // Check if array is empty, if it is, gets the first option

                                if (selectedMultiple.length == 0) {

                                    SelectedNames = MainPlaceholder;

                                } else {

     

                                    for (var i = 0; i < selectedMultiple.length; i++) {

     

                                        var indexValFromArray = selectedMultiple[i];

                                        document.getElementById(this.selector).getElementsByTagName('option')[indexValFromArray + numberless].selected = 'selected';

                                        SelectedNames += ", " + selected_option[indexValFromArray - 1].innerHTML;

     

                                    }

                                    SelectedNames = SelectedNames.substring(2);

                                }

     

                                // Adds the texto o the main DIV

                                document.getElementById("main_" + randomID).innerHTML = SelectedNames + "<i id='arrow_" + randomID + "' class='arrows_bv arrow down'></i>";

     

                            } else {

                                // Get Index of option

                                document.getElementById(this.selector).getElementsByTagName('option')[index + numberless].selected = 'selected';

                                // Trigger onchange function

                                if (x.getAttribute("onchange") != null) {

                                    document.getElementById(this.selector).onchange();

                                }

                                // Updates main div

                                document.getElementById("main_" + randomID).innerHTML = item.textContent + "<i id='arrow_" + randomID + "' class='arrows_bv arrow down'></i>";

                                document.getElementById("ul_" + randomID).style.display = "none";

     

                                // Remove class so Body has Scroll Again

                                document.body.classList.remove("stop-scrolling");

                                if(document.body.contains(document.getElementById('deletebg'))){

                                       document.getElementById("deletebg").remove();

                                }

     

                                  FixVerticalViewPort();

                            }

     

                            // When click, resets search filter

                            if (this.searchbox == true) {

                                document.getElementById("input_" + randomID).value = "";

                                Array.from(document.querySelectorAll("#ul_" + randomID + " li")).forEach(function(val) {

                                    val.style.display = "block";

                                });

                            }

                        }

                    })

                });

            }

     

            // ** CREATE MAIN **

            this.CriarDivBase = function() {

     

                document.getElementById(this.selector).insertAdjacentHTML('afterend', '<div id="bv_' + randomID + '" data-search="' + this.searchbox + '" class="bv_mainselect"></div>');

                document.getElementById("bv_" + randomID).insertAdjacentHTML('afterbegin', '<div id="main_' + randomID + '" style="width:' + this.width + ';" class="bv_atual bv_background"></div><ul id="ul_' + randomID + '" class="bv_ul_inner bv_background"></ul>');

     

                var element_ul = document.getElementById('ul_' + randomID);

                var element_bv = document.getElementById('bv_' + randomID);

     

                // Set Width of UL

                var select_width = document.getElementById("main_" + randomID).offsetWidth;

                element_ul.style.width = select_width + "px";

     

                if (this.searchbox == true) {

                    document.querySelector("#ul_" + randomID).insertAdjacentHTML('afterbegin', '<li class="nofocus"><div class="innerinput"><input placeholder="' + SearchPlaceholder + '" class="bv_input" id="input_' + randomID + '" type="text"></div</li>');

                }

     

                // Get Selected Option

                var selected_option = document.getElementById(this.selector);

                if (!selected_option.attributes.multiple) {

                    // Check if exists any selected option in the native selectbox

                    for (var i = 0; i < selected_option.length; i++) {

                        if (selected_option[i].getAttribute("selected") == "") {

                            var FoundSelectedOP = 1;

                        }

                    }

     

                    // if is 1, its because found it, if not get the placeholder.

                    if (FoundSelectedOP == 1) {

                        first_option_text = selected_option.options[selected_option.selectedIndex].text;

                    } else {

                        first_option_text = MainPlaceholder;

                    }

     

                } else {

                    // Se for multiple, vai buscar sempre o placeholder

                    first_option_text = MainPlaceholder;

                }

     

                document.getElementById("main_" + randomID).innerHTML = first_option_text + "<i id='arrow_" + randomID + "' class='arrows_bv arrow down'></i>";

     

                // Add event Listener on click main div

                document.getElementById("main_" + randomID).addEventListener("click", function() {

     

                    // Reset dropdown position, in case it was changed before

                    document.getElementById("ul_" + randomID).style.position = "absolute";

                    document.getElementById("ul_" + randomID).style.bottom = "";

     

                    // Check Windows Width for Mobile

                    if(window.innerWidth < breakpoint)

                    {

                          document.getElementById("ul_" + randomID).classList.add("bv_ul_mobile");

                          document.getElementById(MDivSelector).insertAdjacentHTML('afterend', '<div id="deletebg" class="bv_ul_bg"></div>');

                          document.body.classList.add("stop-scrolling");

                         

                    } else {

                         document.getElementById("ul_" + randomID).classList.remove("bv_ul_mobile");

                    }

     

                    // Correct the width of the UL when window is resized

                    var select_width = document.getElementById("main_" + randomID).offsetWidth;

                    element_ul.style.width = select_width + "px";

     

                    if (document.getElementById('ul_' + randomID).style.display == 'block') {

     

                        document.getElementById('ul_' + randomID).style.display = 'none';

                        Array.from(document.querySelectorAll(".arrows_bv"))

                            .forEach(function(val) {

                                val.classList.remove("up");

                                val.classList.add("down");

                            });

     

                    } else {

     

                        Array.from(document.querySelectorAll(".bv_ul_inner"))

                            .forEach(function(val) {

                                val.style.display = 'none';

                            });

                        BVfadeIn(document.getElementById('ul_' + randomID));

                        Array.from(document.querySelectorAll(".arrows_bv"))

                            .forEach(function(val) {

                                val.classList.remove("up");

                                val.classList.add("down");

                            });

                        document.querySelector("#arrow_" + randomID).classList.remove("down");

                        document.querySelector("#arrow_" + randomID).classList.add("up");

                    }

     

                    // Call function at end of the dropdown movement

                    if (offset == true) { FixVerticalViewPort(); }

     

                    // Check if autofocus and search is enabled

                    if(search_autofocus == true && searchbox == true) { document.getElementById("input_" + randomID).focus();}

               

                   

                }, false);

     

                // ** SETUP LIST OPTIONS **

                this.SetupListOptions();

            }

     

            // ** CREATES MAIN DIV **

            this.CriarDivBase();

     

            // ** ON SCROLL EVENT TO PREVENT OUT OF VIEWPORT **

            document.addEventListener("scroll", function() {

                if (selectedIDFocus != 0) {

     

                    var currentWindowViewOffSet = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

                    var container = document.getElementById("main_" + randomID);

                    var lastchild = container.lastChild;

                    var currentElementViewOffSet = lastchild.getBoundingClientRect().top;

     

                    var MainDivOff = document.getElementById("ul_" + randomID).clientHeight;

                    var DiffBetW = currentWindowViewOffSet - currentElementViewOffSet // Difference between Element and Window

     

                    // If Difference is greater than List's height

                    if (DiffBetW > MainDivOff) {

                        FixVerticalViewPort();

                    }

                }

            }, false);

     

            // ** FADE OUT FUNCTION **

            function BVfadeOut(el) {

                el.style.opacity = 1;

                (function fade() {

                    if ((el.style.opacity -= .1) < 0) {

                        el.style.display = "none";

                    } else {

                        requestAnimationFrame(fade);

                    }

                })();

            };

            // ** FADE IN FUNCTION **

            function BVfadeIn(el, display) {

                el.style.opacity = 0;

                el.style.display = display || "block";

                (function fade() {

                    var val = parseFloat(el.style.opacity);

                    if (!((val += .1) > 1)) {

                        el.style.opacity = val;

                        requestAnimationFrame(fade);

                    }

                })();

            };

     

            // ** CHECK VIEW PORT OFFSET **

            function FixVerticalViewPort() {

                var currentWindowView = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

                var container = document.getElementById("ul_" + randomID);

                var lastchild = container.lastChild;

                var currentElementView = lastchild.getBoundingClientRect().top;

     

                // +50 to fix outer border

                if (Math.round(currentElementView + 50) > Math.round(currentWindowView)) {

     

                    selectedIDFocus = randomID;

                    document.getElementById("ul_" + randomID).style.position = "fixed";

                    document.getElementById("ul_" + randomID).style.bottom = "0px";

     

                } else {

     

                    selectedIDFocus = 0;

                    document.getElementById("ul_" + randomID).style.position = "absolute";

                    document.getElementById("ul_" + randomID).style.bottom = "";

                }

            }

     

            // ** SEARCH BAR **

            if (this.searchbox == true) {

                document.getElementById("input_" + randomID).addEventListener("keyup", function() {

                    var input, filter, ul, li, i, txtValue;

                    input = document.getElementById("input_" + randomID);

                    filter = input.value.toUpperCase();

                    ul = document.getElementById("ul_" + randomID);

                    li = ul.getElementsByTagName("li");

     

                    // Hides all separators

                    Array.from(document.querySelectorAll(".bv_separator")).forEach(function(val) {

                        val.style.display = "none";

                    });

     

                    for (i = 0; i < li.length; i++) {

     

                        // If Empty, appears every line

                        if (filter == "") {

                            Array.from(document.querySelectorAll("#ul_" + randomID + " li")).forEach(function(val) {

                                val.style.display = "block";

                            });

                        } else {

                            // Removes separators from search

                            txtValue = li[i].innerText || li[i].textContent;

                            if (txtValue.toUpperCase().indexOf(filter) > -1 && !li[i].classList.contains("bv_separator")) {

                                li[i].style.display = "";

                            } else {

                                if (!li[i].classList.contains("nofocus")) {

                                    li[i].style.display = "none";

                                }

                            }

                        }

                    }

                }, false);

            }

            // ** CLICK OUTSIDE **

            document.addEventListener("click", function(e) {

                if (!e.target.closest(".bv_ul_inner") || !event.target.classList.contains('bv_input')) {

                    if (!event.target.classList.contains('bv_input') && !event.target.classList.contains('bv_atual')) {

     

                        if (event.target.nodeName != "LI") {

                            Array.from(document.querySelectorAll(".bv_ul_inner"))

                                .forEach(function(val) {

                                    val.style.display = 'none';

                                });

                            Array.from(document.querySelectorAll(".arrows_bv"))

                                .forEach(function(val) {

                                    val.classList.remove("up");

                                    val.classList.add("down");

                                });

     

                            // When click outside, resets search filter

                            Array.from(document.querySelectorAll("#input_" + randomID)).forEach(function(val) {

                                val.value = "";

                            });

                            Array.from(document.querySelectorAll("#ul_" + randomID + " li")).forEach(function(val) {

                                val.style.display = "block";

                            });

     

                            // Remove class so Body has Scroll Again

                            document.body.classList.remove("stop-scrolling");

                            if(document.body.contains(document.getElementById('deletebg'))){

                                   document.getElementById("deletebg").remove();

                            }

     

                            if (document.getElementById("ul_" + randomID)) // Checks if element existed in case it was destroyed

                            {

                                selectedIDFocus = 0;

                                document.getElementById("ul_" + randomID).style.position = "absolute";

                                document.getElementById("ul_" + randomID).style.bottom = "";

                            }

                        }

                    }

                }

            }, true);

        }

     

        // ** METHODS **

        // DESTROY

        Destroy() {

            // Destroy main element and shows up native selectbox

            document.getElementById("bv_" + this.randomID).remove();

            document.getElementById(this.selector).style.display = "block";

        }

        // UPDATE

        Update() {

            // Removes all Li that does not contain class "nofocus" - Its the search.

            Array.from(document.querySelectorAll("#ul_" + this.randomID + " li"))

                .forEach(function(val) {

                    if (!val.classList.contains("nofocus")) {

                        val.remove();

                    }

                });

            this.SetupListOptions();

        }

        // GET ID

        GetID() {

            // Return ID Generated when building Dropdown, so you can add custom classes

            return this.randomID;

        }

        // CHANGE

        Change(properties) {

     

            if(properties.placeholder)

            {

                document.getElementById("main_" + this.randomID).innerHTML = properties.placeholder + "<i id='arrow_" + this.randomID + "' class='arrows_bv arrow down'></i>";

            }

            if(properties.search_placeholder)

            {

                document.getElementById("input_" + this.randomID).placeholder = properties.search_placeholder;

            }

            if(properties.options && typeof(properties.options) === 'object')

            {

                // Clean every option inside the original selector

                document.querySelector("#"+this.selector).innerHTML = "";

                 // Loop object and add new options to original select box

                var prop = Object.keys(properties.options).length;

                for (var i = 0; i < prop; i++) {

     

                    var change_disabled, change_separator, change_img, change_icon;

     

                    if(properties.options[i].disabled == true){ change_disabled = "disabled"; } else { change_disabled = ""; }

                    if(properties.options[i].separator == true){ change_separator = "data-separator='true'"; } else { change_separator = ""; }

                    if(properties.options[i].img){ change_img = "data-img='"+properties.options[i].img+"'"; } else { change_img = ""; }

                    if(properties.options[i].icon){ change_icon = "data-icon='"+properties.options[i].icon+"'"; } else { change_icon = ""; }

     

                    document.getElementById(this.selector).insertAdjacentHTML('beforeend', "<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value="+properties.options[i].value+" >"+properties.options[i].inner_text+"</option>");

                }

     

            } else {

                console.error("Options must be and Object. Read documentation.");

            }

        }

        // Set option

        SetOption(properties) {

     

            var selectorIndex = document.getElementById(this.selector);

     

            // If is set by index

            if(properties.type == "byIndex")

            {

                selectorIndex.selectedIndex = properties.value;

     

                // Trigger onchange function

                if (selectorIndex.getAttribute("onchange") != null) { document.getElementById(this.selector).onchange(); }

                document.getElementById("main_" + this.randomID).innerHTML = selectorIndex.options[selectorIndex.selectedIndex].text + "<i id='arrow_" + this.randomID + "' class='arrows_bv arrow down'></i>";

     

            // if is set by value

            } else if(properties.type == "byValue")

            {

                for (var i = 0; i < selectorIndex.length; i++) {

     

                     if(selectorIndex[i].value == properties.value)

                     {

                        selectorIndex.selectedIndex = selectorIndex[i].index;

     

                        // Trigger onchange function

                        if (selectorIndex.getAttribute("onchange") != null) { document.getElementById(this.selector).onchange(); }

                        document.getElementById("main_" + this.randomID).innerHTML = selectorIndex[i].innerText + "<i id='arrow_" + this.randomID + "' class='arrows_bv arrow down'></i>";

                     }

                }

            }

        }

        // Append/Prepend Option

        AppendOption(properties) {

           

            console.log(properties);

     

            // Get position e check if position is undefined.

            var position = properties.position;

            if(position == undefined) { var position = "beforeend"; }

     

            if(properties.options && typeof(properties.options) === 'object')

            {

                // Loop object and add new options to original select box

                var prop = Object.keys(properties.options).length;

                for (var i = 0; i < prop; i++) {

     

                    var change_disabled, change_separator, change_img, change_icon;

     

                    if(properties.options[i].disabled == true){ change_disabled = "disabled"; } else { change_disabled = ""; }

                    if(properties.options[i].separator == true){ change_separator = "data-separator='true'"; } else { change_separator = ""; }

                    if(properties.options[i].img){ change_img = "data-img='"+properties.options[i].img+"'"; } else { change_img = ""; }

                    if(properties.options[i].icon){ change_icon = "data-icon='"+properties.options[i].icon+"'"; } else { change_icon = ""; }

     

                    document.getElementById(this.selector).insertAdjacentHTML(position, "<option "+change_img+" "+change_icon+" "+change_separator+" "+change_disabled+" value="+properties.options[i].value+" >"+properties.options[i].inner_text+"</option>");

                }

     

            } else {

                console.error("Options must be and Object. Read documentation.");

            }

        }

    }

     

    bvselect.polyfill.js

     

    "use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var BVSelect=function(){function e(e){var t=e.selector,n=void 0===t?"defaultId":t,o=e.width,l=void 0===o?"100%":o,i=e.searchbox,s=void 0!==i&&i,r=e.offset,d=void 0===r||r,c=e.search_placeholder,a=void 0===c?"Search...":c,u=e.placeholder,m=void 0===u?"Select Option":u,y=Math.floor(1e4*Math.random())+0,p=a,g=m,f=0,v=[],b="",h=n.substring(1);function _(){var e=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0),t=document.getElementById("ul_"+y).lastChild.getBoundingClientRect().top;Math.round(t+50)>Math.round(e)?(f=y,document.getElementById("ul_"+y).style.position="fixed",document.getElementById("ul_"+y).style.bottom="0px"):(f=0,document.getElementById("ul_"+y).style.position="absolute",document.getElementById("ul_"+y).style.bottom="")}this.selector=n.substring(1),this.searchbox=s,this.width=l,this.offset=d,this.randomID=y,this.search_placeholder,document.getElementById(this.selector).style.display="none",this.SetupListOptions=function(){for(var e=this,t=document.getElementById(this.selector),n=0;n<t.length;n++){var o=t[n].text,l=(t[n].value,t[n].disabled),i=t[n].getAttribute("data-separator"),s=t[n].getAttribute("data-img"),r=t[n].getAttribute("data-icon");if(1==l)var d="bv_disabled";else d="";if(i)var c="bv_separator";else c="";if(s)var a="<img src="+s+">";else if(r)a="<i class='"+r+"' aria-hidden='true'></i>";else a="";document.getElementById("ul_"+y).insertAdjacentHTML("beforeend","<li class='"+d+" "+c+"'  > "+a+" "+o+"</li>")}document.querySelectorAll("#ul_"+y+" li").forEach(function(n){n.addEventListener("click",function(o){var l=Array.from(n.parentNode.children).indexOf(n),i=document.getElementById(e.selector);if(1==e.searchbox)var s=-1;else s="";if(n.classList.contains("bv_disabled")||n.classList.contains("nofocus")||n.classList.contains("bv_separator"));else{if(i.attributes.multiple){var r="";if(event.preventDefault(),v.indexOf(l)>-1){var d=v.indexOf(l);v.splice(d,1),document.getElementById(e.selector)[l+s].selected=!1,n.style.backgroundColor="transparent"}else v.push(l),n.style.backgroundColor="#ececec";if(0==v.length)r=g;else{for(var c=0;c<v.length;c++){var a=v[c];document.getElementById(e.selector).getElementsByTagName("option")[a+s].selected="selected",r+=", "+i[a-1].innerHTML}r=r.substring(2)}document.getElementById("main_"+y).innerHTML=r+"<i id='arrow_"+y+"' class='arrows_bv arrow down'></i>"}else document.getElementById(e.selector).getElementsByTagName("option")[l+s].selected="selected",null!=t.getAttribute("onchange")&&document.getElementById(e.selector).onchange(),document.getElementById("main_"+y).innerHTML=n.textContent+"<i id='arrow_"+y+"' class='arrows_bv arrow down'></i>",document.getElementById("ul_"+y).style.display="none",document.body.classList.remove("stop-scrolling"),document.body.contains(document.getElementById("deletebg"))&&document.getElementById("deletebg").remove();1==e.searchbox&&(document.getElementById("input_"+y).value="",Array.from(document.querySelectorAll("#ul_"+y+" li")).forEach(function(e){e.style.display="block"})),_()}})})},this.CriarDivBase=function(){document.getElementById(this.selector).insertAdjacentHTML("afterend",'<div id="bv_'+y+'" data-search="'+this.searchbox+'" class="bv_mainselect"></div>'),document.getElementById("bv_"+y).insertAdjacentHTML("afterbegin",'<div id="main_'+y+'" style="width:'+this.width+';" class="bv_atual bv_background"></div><ul id="ul_'+y+'" class="bv_ul_inner bv_background"></ul>');var e=document.getElementById("ul_"+y),t=(document.getElementById("bv_"+y),document.getElementById("main_"+y).offsetWidth);e.style.width=t+"px",1==this.searchbox&&document.querySelector("#ul_"+y).insertAdjacentHTML("afterbegin",'<li class="nofocus"><div class="innerinput"><input placeholder="'+p+'" class="bv_input" id="input_'+y+'" type="text"></div</li>');var n=document.getElementById(this.selector);if(n.attributes.multiple)b=g;else{for(var o=0;o<n.length;o++)if(""==n[o].getAttribute("selected"))var l=1;b=1==l?n.options[n.selectedIndex].text:g}document.getElementById("main_"+y).innerHTML=b+"<i id='arrow_"+y+"' class='arrows_bv arrow down'></i>",document.getElementById("main_"+y).addEventListener("click",function(){document.getElementById("ul_"+y).style.position="absolute",document.getElementById("ul_"+y).style.bottom="",window.innerWidth<600?(document.getElementById("ul_"+y).classList.add("bv_ul_mobile"),document.getElementById(h).insertAdjacentHTML("afterend",'<div id="deletebg" class="bv_ul_bg"></div>'),document.body.classList.add("stop-scrolling")):document.getElementById("ul_"+y).classList.remove("bv_ul_mobile");var t,n,o=document.getElementById("main_"+y).offsetWidth;e.style.width=o+"px","block"==document.getElementById("ul_"+y).style.display?(document.getElementById("ul_"+y).style.display="none",Array.from(document.querySelectorAll(".arrows_bv")).forEach(function(e){e.classList.remove("up"),e.classList.add("down")})):(Array.from(document.querySelectorAll(".bv_ul_inner")).forEach(function(e){e.style.display="none"}),(t=document.getElementById("ul_"+y)).style.opacity=0,t.style.display=n||"block",function e(){var n=parseFloat(t.style.opacity);(n+=.1)>1||(t.style.opacity=n,requestAnimationFrame(e))}(),Array.from(document.querySelectorAll(".arrows_bv")).forEach(function(e){e.classList.remove("up"),e.classList.add("down")}),document.querySelector("#arrow_"+y).classList.remove("down"),document.querySelector("#arrow_"+y).classList.add("up")),1==d&&_()},!1),this.SetupListOptions()},this.CriarDivBase(),document.addEventListener("scroll",function(){0!=f&&(Math.max(document.documentElement.clientHeight||0,window.innerHeight||0)-document.getElementById("main_"+y).lastChild.getBoundingClientRect().top>document.getElementById("ul_"+y).clientHeight&&_())},!1),1==this.searchbox&&document.getElementById("input_"+y).addEventListener("keyup",function(){var e,t,n;for(e=document.getElementById("input_"+y).value.toUpperCase(),t=document.getElementById("ul_"+y).getElementsByTagName("li"),Array.from(document.querySelectorAll(".bv_separator")).forEach(function(e){e.style.display="none"}),n=0;n<t.length;n++)""==e?Array.from(document.querySelectorAll("#ul_"+y+" li")).forEach(function(e){e.style.display="block"}):(t[n].innerText||t[n].textContent).toUpperCase().indexOf(e)>-1&&!t[n].classList.contains("bv_separator")?t[n].style.display="":t[n].classList.contains("nofocus")||(t[n].style.display="none")},!1),document.addEventListener("click",function(e){e.target.closest(".bv_ul_inner")&&event.target.classList.contains("bv_input")||event.target.classList.contains("bv_input")||event.target.classList.contains("bv_atual")||"LI"!=event.target.nodeName&&(Array.from(document.querySelectorAll(".bv_ul_inner")).forEach(function(e){e.style.display="none"}),Array.from(document.querySelectorAll(".arrows_bv")).forEach(function(e){e.classList.remove("up"),e.classList.add("down")}),Array.from(document.querySelectorAll("#input_"+y)).forEach(function(e){e.value=""}),Array.from(document.querySelectorAll("#ul_"+y+" li")).forEach(function(e){e.style.display="block"}),document.body.classList.remove("stop-scrolling"),document.body.contains(document.getElementById("deletebg"))&&document.getElementById("deletebg").remove(),document.getElementById("ul_"+y)&&(f=0,document.getElementById("ul_"+y).style.position="absolute",document.getElementById("ul_"+y).style.bottom=""))},!0)}var t=e.prototype;return t.Destroy=function(){document.getElementById("bv_"+this.randomID).remove(),document.getElementById(this.selector).style.display="block"},t.Update=function(){Array.from(document.querySelectorAll("#ul_"+this.randomID+" li")).forEach(function(e){e.classList.contains("nofocus")||e.remove()}),this.SetupListOptions()},t.GetID=function(){return this.randomID},t.Change=function(e){if(e.placeholder&&(document.getElementById("main_"+this.randomID).innerHTML=e.placeholder+"<i id='arrow_"+this.randomID+"' class='arrows_bv arrow down'></i>"),e.search_placeholder&&(document.getElementById("input_"+this.randomID).placeholder=e.search_placeholder),e.options&&"object"===_typeof(e.options)){document.querySelector("#"+this.selector).innerHTML="";for(var t=Object.keys(e.options).length,n=0;n<t;n++){var o,l,i,s;o=1==e.options[n].disabled?"disabled":"",l=1==e.options[n].separator?"data-separator='true'":"",i=e.options[n].img?"data-img='"+e.options[n].img+"'":"",s=e.options[n].icon?"data-icon='"+e.options[n].icon+"'":"",document.getElementById(this.selector).insertAdjacentHTML("beforeend","<option "+i+" "+s+" "+l+" "+o+" value="+e.options[n].value+" >"+e.options[n].inner_text+"</option>")}}else console.error("Options must be and Object. Read documentation.")},e}();