2 demos of multi-select and auto-complete jQuery plug-in: MSelectDialogBox

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:

jquery autocomplete

See online demo and code

The simple markup:

 

 

The jQuery code:

 

 

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.

jquery multiselect autocomplete

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.