jQuery plugin: bhDropdownSelect

bhDropdownSelect implements a multi-column drop-down select using Bootstrap v5.1.3 dialog and jQuery v3.6.0.

This v1.0.0 version implements a two-column grid in a fixed size dialog.

There is still much to be done. For example, among others, smart positioning is the first priority, currently it is just assumed that there is optimal space available for this plugin to look its best.

GitHub address: https://github.com/behai-nguyen/jquery-bhdropdownselect.

Let's look at how it works. Full example codes are also included in the above GitHub repo.

jQuery plugin bhDropdownSelect usage Example 01.

“Select a Language” demonstrates default behaviours.

Please note that option “theme” ( safe ) could be omitted as it is the default theme.
Changing the button “Select a Language” label text to bold programmatically to demonstrate that this plugin is chainable: it behaves correctly according to jQuery plugin guidelines.

The HTML for the button and the text field are listed below:

<div class="row g-3 align-items-center">
	<div class="col-3">
		<button type="button" id="btnLanguage" class="btn btn-primary">Select a Language</button>
	</div>

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

And the corresponding JavaScript codes:

function selectLanguage( params ) {
	$( '#selectedLanguage' ).val( `${params[0]}, ${params[1]}` );
};

$( document ).ready( function() {
	$( '#btnLanguage' ).bhDropdownSelect({
		source: AVAILABLE_LANGUAGES,
		selectCallback: selectLanguage,
		theme: 'safe'
	}).addClass( 'fw-bold' );
});

“Select Your Tropical Fruit” demonstrates:

Using a different data list. That is, on the same page, different instances of this plugin are able to operate on different data lists.
Setting “theme” to “eyesore” -- which is the second CSS that comes with this plugin.

HTML for “Select Your Tropical Fruit”:

<div class="row g-3 align-items-center">
	<div class="col input-group mb-3">
		<button class="btn btn-outline-primary" type="button" id="btnTropicalFruits">Select Your Tropical Fruit</button>
		<input type="text" id="selectedFruit" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="btnTropicalFruits">
	</div>
</div>

JavaScript for “Select Your Tropical Fruit”:

$( document ).ready( function() {
	$( '#btnTropicalFruits' ).bhDropdownSelect({
		source: TROPICAL_FRUITS,

		selectCallback: function( params ) {
			$( '#selectedFruit' ).val( `${params[0]}, ${params[1]}` );
		},

		theme: 'eyesore'
	});
});

“Click to Select” -- this last one demonstrates what happen when “source” -- that is, the data list -- is set to null, this is also the default setting for option “source”.

HTML for “Click to Select”:

<div class="row g-3 align-items-center">
	<div class="col-4">
		<button type="button" id="btnNoSource" class="btn btn-secondary">Click to Select</button>
	</div>

	<div class="col-8">
		<input type="text" class="form-control" placeholder="Something..." aria-label="No Source Data">
	</div>
</div>

JavaScript for “Click to Select”:

$( document ).ready( function() {
	$( '#btnNoSource' ).bhDropdownSelect({
		source: null
	});
});

Libraries' Scripts and Data List Format

This plugin needs Bootstrap and jQuery. We must include the followings:

<!-- Bootstrap 5.1.3 and jQuery 3.6.0. -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- jQuery plugin bhDropdownSelect's CSS and JS. --->
<link href="https://cdn.jsdelivr.net/gh/behai-nguyen/jquery-bhdropdownselect@main/src/bhDropdownSelect.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/behai-nguyen/jquery-bhdropdownselect@main/src/bhDropdownSelect.js"></script>

Please note the above is just one way of doing the inclusion. And also for this plugin, I am not providing minified version of the source files. For my project, I am just bundling them into the project's minified JS and minified CSS.

Data lists, such as AVAILABLE_LANGUAGES and TROPICAL_FRUITS as seen previously, are arrays of objects. Each object has two string properties: 'code' and 'name'. For example:

const TROPICAL_FRUITS = [
	{ code: "tf00255", name: "Watermelon"},
	...
	{ code: "tf00000", name: "Apple"},
	{ code: "tf00005", name: "Apricot"}	
];

Theming

This plugin has two built-in themes: safe and eyesore. safe is basically the default colours provided by Bootstrap CSS. eyesore is my own colour scheme. I am horrible with colours, I name them like that for attention catching.

Users can define their colour scheme, such as example02 as seen in the following next and final example.

jQuery plugin bhDropdownSelect usage Example 02.

This example demonstrates using user-defined theme: example02.

The CSS for example02 theme:

/* User-defined theme: example02. */
.dropdown-select.theme-example02 .modal-header { background-color: #adbcce; }

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

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

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

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

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

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

HTML:

<div class="row g-3 align-items-center mb-4">
	<div class="col input-group mb-3">
		<button class="btn btn-outline-primary" type="button" id="btnTropicalFruits2">Select Your Tropical Fruit</button>
		<input type="text" id="selectedFruit2" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="btnTropicalFruits2">
	</div>
</div>

JavaScript:

$( document ).ready( function() {

	$( '#btnTropicalFruits2' ).bhDropdownSelect({
		source: TROPICAL_FRUITS,

		selectCallback: function( params ) {
			$( '#selectedFruit2' ).val( `${params[0]}, ${params[1]}` );
		},

		theme: 'example02'
	});
});

Some Further Notes

As mentioned before, this version of the plugin does not have smart positioning, it is just assumed that there is enough space to make it fully visible. I would like to address this as the first priority in the next version.

The container dialog is fixed size, there are no options to set the width nor the height.

Still related to positioning, while the dialog is opened, if we scroll the screen up, it does not move with the element that it is attached to.

I would also like to make the number of columns a configureable option.

Another desirable option is to enable multiple selection, whereby users can select multiple items, then hit ( a new button ) to select and close the dialog.