Enhanced Dropdown Select Box For Bootstrap 5 – dselect

Preview:

Description:

dselect is a JavaScript library that adds advanced features (like live search, dynamic creation, field validation) to the native Bootstrap 5 select boxes.

How to use it:

1. Add the dselect’s JavaScript and CSS to your Bootstrap 5 project.

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- dselect -->
<link rel="stylesheet" href="css/dselect.css" />
<script src="js/dselect.js"></script>

2. Initialize the select on the target select box and done.

<select class="form-select" id="example">
  <option value="1">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  <option value="4">Bootstrap</option>
  <option value="5">Tailwind</option>
</select>

dselect(document.querySelector('#example'))

3. Enable the live search feature.

dselect(document.querySelector('#example'),{
  search: true
})

4. You can also add more options to the select box by enabling the creatable option.

dselect(document.querySelector('#example'),{
  creatable: true
})

5. Determine whether the select box is clearable.

dselect(document.querySelector('#example'),{
  clearable: true
})

6. Set the size of the select box.

dselect(document.querySelector('#example'),{
  maxHeight: '360px',
  size: '', // 'sm' or 'lg'
})

7. You can also pass the options via HTML data attributes as follows:

<select class="form-select" id="example"
        data-dselect-search="true"
        data-dselect-max-height="300px">
  ...
</select>