Optimized for Bootstrap 5 Dropdown Select Box | dselect

How to make use of it:

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

<!-- 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 choice on the goal choose the field and accomplished.

<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 stay search function.

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

4. You may also add extra choices to the chosen field by enabling the creatable possibility.

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

5. Determine whether or not they chosen field is clearable.

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

6. Set the size of the chosen field.

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

7. You may also go the choices by way of HTML information attributes as follows:

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

Enhanced Dropdown Select Box For Bootstrap 5, dselect Plugin/Github

See Demo And Download