Select dropdown with search
Bootstrap 5 Select dropdown with search component
Responsive Select dropdown with search built with Bootstrap 5. Helps you find the options you are looking for by searching.
Basic example
In select set filter option to true to enable options filtering.
Multiselect
Add multiple attribute to the select element to activate multiple mode.
With label
It is possible to add select label by creating element with .form-label and .select-label classes.
Disabled options
Use disabled attribute on option element to disable specific option.
Visible options
Use visibleOptions option to change the number of options that will be displayed in the select dropdown without scrolling.
With icons
Add icon data attribute to the specific options to display the option icon.
Select with search inside a modal
Due to a focus trap in modals, it is not possible to focus the outer elements (like select dropdown). You can use select data-mdb-container option to resolve this problem.
The data-mdb-container accepts selector of the element inside of wich select dropdown will be rendered. In this case, the selector should point to the modal container (the element with class .modal). It is important to use a unique selector to assign select to a specific modal.