jQuery Plugin for Interactive Multi-Select & Autocomplete Dropdown Lists

MSelectDialogBox is a jQuery plug-in that attaches a dropdown menu with multi-selection and auto-complete capabilities for any DOM elements when in focus.


  • Multiple selections
  • Events
  • Autocomplete
  • The function is assigned to the autocomplete filter. Example: Correct the keyboard language
  • layout
  • It can be linked to any target item
  • Adapted to mobile devices
  • The API suggests that you can customize the control

Must Read: Autocomplete/Typeahead JS Plugin For Bootstrap v5

How to make use of it:

1. Add the jQuery MSelectDialogBox plugin together with the newest jQuery library to your webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/MSelectDBox.js"></script>

2. Usages

    "list": (function(){
        var arr = [];
        for(var c=0; c<30; c++){
            arr.push(Math.round(Math.random() * 10000));
        return arr;
    "multiple": false,
    "autoComplete": true,
    "name": "a"

3. All attainable configuration options.


  // Array of list items
  // ["Apple", "Orange", "Banana"];
  // [{"label": "Apple", "value": "0"}, {"label": "Orange", "value": "1"}, {"label": "banana", "value": "2"}]
  "list": [],

  // enable multiple select
  "multiple": true,

  // enable autocomplete
  "autoComplete": true,
  // Name of instance. 
  "name": "a",

  // autocomplete filters.
  optionFilters: $.prototype.mSelectDBox.prototype.defaultOptionFilters.default,

  // enable live search
  embeddedInput: true,

  // z-index property
  zIndex: 9999,

  // width
  width: '300px',

  // shows close button
  closeButton: true,

  // language
  language: 'en',

  // open on focus
  openOnFocus: true,

  // allows you to add custom options
  freeWrite: false,


4. Callback features.


  // Fires when text input was changed
  "onchange": function(msdbContext, event){},

  // Fires when list item is selected
  "onselect": function(msdbContext, event){},

  // Fires when text input become empty
  "input:empty": function(msdbContext, event){}

  // Fires onkeydown event
  "onkeydown": function(msdbContext, event){}

  // Fires onkeyup event
  "onkeyup": function(msdbContext, event){}

  // Fires when text input become empty
  "input:empty": function(msdbContext, event){}
  // Fires when element gets focused
  "focus": function(msdbContext, event){}

  // Fires when element loss focused
  "focusout": function(msdbContext, event){}



Must Read: Simple Tag Input Using Typeahead Autocomplete Built With Vue.js

  • init – fires when the instance initialized
  • onselect – fires when a list item is selected
  • onchange – fires when text input was changed
  • onkeydown – same as the original onkeydown event
  • onkeyup – same as the original onkeyup event
  • input:empty – fires when text input becomes empty
  • autocomplete:empty – fires when autocomplete function results empty list
  • autocomplete:not-empty – fires when autocomplete function results not empty list
  • focus – you know… focus
  • focusout – same as blur
  • set – Fires when calling set method. Example: instance.set(“fieldName”, 100);
  • set:field – Fires when calling the “set” method with a specified key. Example: instance.set(“field”, 100);
  • get – Fires when calling the “get” method. Example: instance.get(“fieldName”);
  • get:field – Fires when calling the “get” method with the specified key. Example: instance.get(“field”, 100);
  • afterSet:field – Fires after the “get” method was called with a specified key. The event ensures that the function will be executed after the assignment and will have access to a new value;
  • beforeSet:field – Fires before the “get” method will be called with a specified key.

See Demo And Download


Official Website(eugenegantz): Click Here

This superior jQuery/javascript plugin is developed by eugenegantz. For extra Advanced Usage, please go to the official website.

Related Posts


[Icon Picker] Iconpicker for Bootstrap 5 Icons Library

Bootstrap 5-based icon picker which supports any icon libraries like Bootstrap Icons, Font Awesome[fontawesome.com], etc. Must Read: 1000+ Pixel Perfect SVG Icons For Vue Components | Unicons How…


Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server. Must Read: HTML 5…


A Lightweight jQuery Plugin for Animating Split-Flap Displays | fallblatt

fallblatt is a lightweight jQuery plugin for animating split screens. This jQuery plugin allows you to include such offers in your web application. Everything from virtual departure…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


jQuery Plugin for Countdown Timer on HTML Page | SyoTimer

yoTimer jQuery plugin allows you to create digital style countdowns/periodic timers on the webpage, with callbacks support and timezone/translation customization. Features Periodic count with the specified period…


Dynamic, Data-driven Periodic Table built with Vue.js

Periodicity is a dynamic, data-driven periodic table created with Vue.js that uses D3 animations and graphs to show the beauty of periodic trends. Built With vue.js (component…

Leave a Reply

Your email address will not be published. Required fields are marked *