Style And Enhance Select Elements With Bootstrap 4 - extendSelect

Yet another jQuery plugin which makes use of Bootstrap 4 dropdown component to style and add extra functionalities (e.g. live search, max selection) to the regular select box. Also supports multiple select and option groups.

Alternative plugin:

• Flexible Bootstrap 4 Dropdown Plugin With jQuery - Bootstrap 4 Select
• jQuery Plugin For Filterable Bootstrap 3 Dropdown Select - Bootstrap Select

How to use it:

1. Import the necessary Bootstrap 4 files into the html file.

<!-- Stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

2. Import the Bootstrap 4 select plugin's files:

<!-- Stylesheet -->
<link rel="stylesheet" href="css/select.css">
<!-- JavaScript -->
<script src="src/select.js"></script>

3. Initialize the plugin on the existing select element and done.

<select class="form-control">
  <option>C++</option>
  <option selected>Swift</option>
  <option disabled>Java</option>
  <optgroup label="JavaScript">
    <option>jQuery</option>
    <option>React.js</option>
    <option>Angular.js</option>
  </optgroup>
</select>

$('select').extendSelect();

4. Add the live search functionality to the dropdown select.

<select class="form-control" 
        data-live-search-placeholder="Search"
        data-live-search="true">
  <!-- Options here -->
</select>

5. Limit the number of options allowed to select.

<select class="form-control" 
        data-live-search="true"
        data-max-options-message="Max items"
        data-max-options="2">
  <!-- Options here -->
</select>

6. Override the default styles of the the dropdown button.

<select class="form-control" 
        data-live-search="true"
        data-max-options="2"
        data-btn-class="btn-primary">
  <!-- Options here -->
</select>

7. If you want to hide the disabled options.

<select class="form-control" 
        data-hide-disabled="true">
  <!-- Options here -->
</select>

8. Full plugin settings with default values.

$('select').extendSelect({
  search: 'Search',
  notSelectedTitle: 'Nothing to shown',
  empty: 'Nothing to shown',
  activeClass: 'active',
  disabledClass: 'disabled',
  maxOptionMessage: 'Limit reached (%items items max)',
  maxOptionMessageDelay: 2000,
  popoverResize: false,
  dropdownResize: false
});

Change log:

2018-01-20

• Adding checkmark to selected item(s)

2018-01-19

• Add personal data options to select "data-not-selected" and "data-empty"

2018-01-13

• Fixed: Change Event is not triggered on native select
• Fix open dropdown into input-group

---

This awesome jQuery plugin is developed by hardskilled. For more Advanced Usages, please check the demo page or visit the official website.