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

  • 338
  • 18-Nov-2021

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}();

 

Download