Bootstrap Style Searchable Dropdown Plugin – fstdropdown

Category: Form , Javascript | January 29, 2020
Author: VirtusX
Views Total: 1,447
Official Page: Go to website
Last Update: January 29, 2020
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:

01/29/2020

  • Update fstdropdown.js

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:


6 thoughts on “Bootstrap Style Searchable Dropdown Plugin – fstdropdown

  1. Yusuf

    Just want to say this dropdown plugin is amazing! Worked out very well integrating into my website. Thanks!!

    Reply
  2. Taha Siddiqui

    it is not compatible with IE11, is there any work around for use it on IE based application

    Reply
  3. Luciano

    Hello,
    It’s work very well but, If I put it in a file with prototype.js inclusion it stop working, why?

    Thank you,
    Regards

    Reply

Leave a Reply