The MSelectDialogBox plug-in for multi-select and auto-complete
Earlier, I have covered the built-in jQuery autocomplete plug-in here with demos. Similarly, the different multi-select dropdowns are also covered on this website.
In this tutorial, a multi-select and auto-complete plug-in which is jQuery based plug-in is covered with live demos. The plug-in name is MSelectDialogBox that you may download from the credit link given below. Alternatively, you may get the JS and other files from the demo pages in the following section.
First, a demo of auto-complete only
You may choose to use a single feature or both by using the options in the jQuery code. In this example, only the auto-complete feature is enabled while the multi-select feature is disabled by using the “multiple”: false option in the jQuery code. Enter any number in the input box and see how auto-complete feature works:
See online demo and code
The simple markup:
<h3>A demo of auto complete</h3> <label>Enter a number: <input id="msdb-a" class="std-input" type="text"> </label>
The jQuery code:
$("#msdb-a").mSelectDBox({
"list": (function(){
var arr = [];
var counter = 0;
for(var c=0; c<9000; c++){
arr.push(counter += Math.round(Math.random() * 99) * 10);
}
return arr;
})(),
"multiple": false,
"autoComplete": true,
"input:empty": eventLog,
"onselect": eventLog,
"name": "a"
});
Get the complete code from the demo page.
A demo of multi-select and auto-complete
Using the same code as in above example except the multiple option is set as true. Now, you may select multiple options along with auto-complete feature.
See online demo and code
How to set up jQuery auto-complete and multi-select plug-in?
- Download the plug-in from the developer’s page at Github website (eugenegantz).
- Unzip the package and get the MSelectDBox.js or its minified version.
- Place it at your desired location and refer it after the jQuery JS file.
- Use the jQuery code and markup as shown in the examples.
- The plug-in has a plenty of options that you may explore by visiting the developer’s page. For example, it supports different events like onselect, onchange, onkeydown, focus, set, get etc. You may use these events for different actions.