/BVSelect-VanillaJS

BVSelect - Vanilla Javascript Fully Customizable SelectBox

Primary LanguageJavaScriptMIT LicenseMIT

BVSelect - Vanilla JS


Replaces native select elements with fully customizable dropdowns.

Demo:

https://bmsvieira.github.io/BVSelect-VanillaJS/

Features:

  • 🔧 Fully Customizable
  • 💪 No Dependencies, built with VanillaJS
  • 🌎 Tested in All Modern Browsers
  • 😎 Images & FontIcons
  • ⌨️ Mobile Optimization & Normal Usage
  • 🔎 Built-in Searchbox
  • 🖥 Prevented Viewport Overflow

Installation:

1 - Include JavaScript Source.

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

2 - Include Styles.

<link rel="stylesheet" href="path/to/bvselect.css">

4 - Set HTML.

<select id="selectbox">
  <option data-separator="true"> Select Option </option>
  <option value="1"> Option 1 </option>
  <option value="2"> Option 2 </option>
  <option value="3" disabled> Option 3 </option>
  <option value="4"> Option 4 </option>
</select>

3 - Initilize.

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new BVSelect({
        selector: "#selectbox",
        width: "100%",
        searchbox: true,
        offset: true,
        placeholder: "Select Option",
        search_placeholder: "Search...",
        search_autofocus: true,
        breakpoint: 450
      });
});

Polyfill:

BVSelect uses ES6 which isn't supported in all browsers yet (especially older browsers). Some features will need to be polyfilled to be available. Use the following sources instead:

// Polyfill Source
<script src="https://polyfill.io/v3/polyfill.min.js?features=document.querySelector%2Cdocument%2CArray.prototype.forEach%2CNodeList.prototype.forEach%2CElement.prototype.closest%2CArray.from%2Ces5"></script>

// BVSelect Polyfilled Version
<script src="path/to/bvselect.polyfill.js"></script>

Methods:

Destroy: Removes dropdown, unbinds all its events and brings back the original Select.

demo1.Destroy();

Update: Updates current dropdown based on changes to the original selectbox.

demo1.Update();

Get ID: Returns the ID that was generated to build dropdown, so you can add custom classes.

demo1.GetID();

Set Option: Set new selected option.

Name Value Description
type byIndex or byValue Parameter
value string Value to search
demo1.SetOption({
  type: "byIndex",
  value: "1"
});

Change: Changes dropdown's settings

Name Value Description
placeholder string Modify dropdown's placeholder
search_placeholder string Modify input's placelholder
options object Replaces all options in the original selectbox
demo1.Change({
  placeholder: "New Placeholder",
  search_placeholder: "New Searchbox's Placeholder",
  options : {
          0: {
              inner_text: 'Metallica',
              value: "met",
              disabled: false,
              separator: false,
              img: "https://img.icons8.com/color/2x/usa.png",
              icon: "fa fa-hashtag"
          },
          1: {
              inner_text: 'Megadeth',
              value: "meg",
              disabled: false,
              separator: false,
              img: false,
              icon: "fa fa-tshirt"
          },
          2: {
              inner_text: 'Slayer',
              value: "sla",
              disabled: false,
              separator: false,
              img: false,
              icon: "fa fa-hashtag"
          }  
    }
});

// Update Dropdown based on changes to the original selectbox
demo1.Update();

Append Option: Add new options to existing selectbox

Name Value Description
position afterbegin or beforeend Add new options at beginning or ending of the dropdown
options object Options to add to original selectbox
demo1.AppendOption({
    position: "beforeend",
    options : {
            0: {
                inner_text: 'Metallica',
                value: "met",
                disabled: false,
                separator: false,
                img: "https://img.icons8.com/color/2x/usa.png",
                icon: "fa fa-hashtag"
            },
            1: {
                inner_text: 'Megadeth',
                value: "meg",
                disabled: false,
                separator: false,
                img: false,
                icon: "fa fa-tshirt"
            }
      }
  });

// Update Dropdown based on changes to the original selectbox
demo1.Update();

Settings:

Name Value Default Description
selector ID --- Specify ID of the element
width px or % 100% Specify the width of the main element
searchbox boolean false Add a search box to the list
offset boolean true Fixes Viewport Offset
placeholder string Select Option Modify dropdown's placeholder
search_placeholder string Search... Modify input's placelholder
search_autofocus boolean false Automatically focus on search input if enabled
breakpoint integer 600 Defines the responsive breakpoint (in px)
document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new BVSelect({
        selector: "#selectbox",
        searchbox: true,
        offset: true
      });
});

Attributes:

Name Value Description
data-separator boolean Highlights an option
data-img Image Source Adds an Image to option
data-icon fa fa-hashtag Adds an FontIcon to option, can be used any provider as long it is identical. Images will be prioritized over icons.
disabled (native) disabled Disables an option

To add FontIcons, you must include it's own sources

<select id="selectbox">
    <option value="##" data-separator="true" selected>Select Option</option>
    <option data-img="path/to/img.png" value="--">Cristiano Ronaldo</option>
    <option data-icon="fa fa-hashtag" value="--" >Lionel Messi </option>
    <option data-img="path/to/img.png" value="--" disabled>Neymar Jr. (Disabled)</option>
    <option data-img="path/to/img.png" value="--">Ronaldinho</option>
    <option data-img="path/to/img.png" value="--">Luis Figo</option>
</select>

All CSS styles are fully customizable in order to match your style

Appearance

This was built to fit any style and to be 100% fully customizable, so you are able to change everything in the css file.