Discover BMSVieira/BVSelect-VanillaJS Open Source project

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.

BMSVieira/BVSelect-VanillaJS

BMSVieira

Reviews

Repository Details