Searchable Single & Multiple Select Plugin For Bootstrap 4

Category: Form , Javascript | May 18, 2020
Author:ibnujakaria
Views Total:7,594 views
Official Page:Go to website
Last Update:May 18, 2020
License:MIT

Preview:

Searchable Single & Multiple Select Plugin For Bootstrap 4

Description:

A vanilla JavaScript extension for Bootstrap 4 framework that helps you create a user-friendly, filterable single or multiple select component from the native select element.

How to use it:

1. Load the Bootstrap’s stylesheet in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Load the multiple select plugin’s JavaScript and CSS files in the document.

<link rel="stylesheet" href="/path/to/dist/css/multiple-select.css" />
<script src="/path/to/dist/js/multiple-select.js"></script>

3. Initialize the plugin on your select element.

<select id="select-multiple-language" multiple>
  <option value="html">HTML</option>
  <option value="javascript">Javascript</option>
  <option value="css">CSS</option>
  <option value="css3">CSS3</option>
</select>
new MultipleSelect('#select-multiple-language', {
    // options here
})

4. Override the placeholder of the search field. Default: ‘Select’.

new MultipleSelect('#select-multiple-language', {
    placeholder: 'Select Language'
})

You Might Be Interested In:


Leave a Reply