Bootstrap Style Searchable Dropdown Plugin – fstdropdown

Category: Form , Javascript | April 26, 2019
Author: VirtusX
Views Total: 585
Official Page: Go to website
Last Update: April 26, 2019
License: MIT

Preview:

Bootstrap Style Searchable Dropdown Plugin – fstdropdown

Description:

The fstdropdown JavaScript plugin turns a normal select element into a searchable, Bootstrap style drop-down select with pure JavaScript and CSS.

How to use it:

Insert the fstdropdown’s JavaScript and Stylesheet into the HTML file.

<script src="fstdropdown.js"></script>
<link rel="stylesheet" href="fstdropdown.css">

Just add the CSS class fstdropdown-select to your select element and the plugin will do the rest.

<select class="fstdropdown-select" id="example">
  <option value="">Select option</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
</select>

To disable the searchable functionality, set the data-searchdisable to true.

<select class="fstdropdown-select" id="example" data-searchdisable="true">
  <option value="">Select option</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
</select>

Update the drop-down select in case you add new options.

fstdropdown.rebind();

Initialize the plugin on a specific select element.

setFstDropdown();

Changelog:

04/26/2019

  • The selection list is now floating, autofocus added when opening the list. Fixed bugs on IE9 and Edge

You Might Be Interested In:


Leave a Reply