Searchable Single & Multiple Select Plugin For Bootstrap 4

Image may be NSFW.
Clik here to view.

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'
})

The post Searchable Single & Multiple Select Plugin For Bootstrap 4 appeared first on CSS Script.