jQuery 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.

Features:

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

Table of Contents

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

$("#selector").mSelectDBox({
    "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.

$("#example").mSelectDBox({

  // 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.

$("#example").mSelectDBox({

  // 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){}

});

Events

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.