Multi-column Dropdown Select With jQuery And Bootstrap 5

This is a nice and fancy multi-column dropdown select plugin built with jQuery and Bootstrap 5.

The multi-comlumn dropdown select will be displayed in a Bootstrap 5 modal window when triggered. Your users can enter a value or a search query which will filter values in all columns. After finishing a search, only matching values are displayed in the dropdown.

How to use it:

1. Load the needed jQuery library and Bootstrap 5 framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Create a button to trigger the multi-column dropdown select.

<button type="button" id="btnLanguage" class="btn btn-primary">
  Select a Language
</button>

3. Create an input field to store the user selection.

<input type="text" id="selectedLanguage" class="form-control" placeholder="Language..." aria-label="Language">

4. Prepare your data (an array of objects) for the options.

const AVAILABLE_LANGUAGES = [
  { code: "af", name: "Afrikaans"},
  { code: "sq", name: "Albanian"},
  { code: "ar", name: "Arabic"},
  // ...
];

5. Initialize the plugin and populate the dropdown select with the data you just provided.

$( '#btnLanguage' ).bhDropdownSelect({ 
  source: AVAILABLE_LANGUAGES,
  selectCallback: selectLanguage,
}).

// store the selected value in the input field
function selectLanguage( params ) {
  $( '#selectedLanguage' ).val( `${params[0]}, ${params[1]}` );
};

6. Set the theme. Default: "safe".

$( '#btnLanguage' ).bhDropdownSelect({ 
  source: AVAILABLE_LANGUAGES,
  selectCallback: selectLanguage,
  theme: 'eyesore' 
}).

7. Or create your own themes in the CSS.

.dropdown-select.mytheme .modal-header { background-color: #adbcce; }

.dropdown-select.mytheme .modal-header input[type="text"] {
  background-color: #d5dce5;
}

.dropdown-select.mytheme .modal-body { background-color: #879ebc; }

.dropdown-select.mytheme .modal-body .container .row:nth-child( odd ) {
  background-color: #9fc5f7;
}

.dropdown-select.mytheme .modal-body .container .row:nth-child( even ) {
  background-color: #3b87ec;
}

.dropdown-select.mytheme .item-highlight { 
  background-color: #c1d8f5; 
  font-style: italic;
  font-weight: bold;
}

.dropdown-select.mytheme .item-normal { 
  font-style: normal; 
  font-weight: normal;
} 

$( '#btnLanguage' ).bhDropdownSelect({ 
  source: AVAILABLE_LANGUAGES,
  selectCallback: selectLanguage,
  theme: 'mytheme' 
}).

---

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