Multi-Select & Autocomplete Dropdown Plugin For jQuery - MSelectDialogBox

MSelectDialogBox is a jQuery plugin that attaches a dropdown list with capabilities of multi select and autocomplete to any DOM elements (e.g. input fields) when getting focused.

How to use it:

1. Add the jQuery MSelectDialogBox plugin along with the latest jQuery library to your webpage.

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

2. Call the function to attach a default dropdown list to your input field.

<input id="example" type="text">

$("#example").mSelectDBox({
  "list": [] // Array of list items
});

3. All possible 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,

  // true or false
  exceptDisabled: true,

  // language
  language: 'en',

  // open on focus
  openOnFocus: true,

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

});

4. Callback functions.

$("#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){}

});

5. API methods.

• getInstances(Object arg): Search initialized instances by name. Return array of matched instances.
• trigger(String eventName): Fires predefined event.
• on(String eventName, Function callback): Add custom event listener.
• select(Object arg): Select list items by value or label.
• selectAll: Only if multiple = true.
• deselectAll: Deselect all items.
• open: Show list box.
• close: Hide list box.
• isActive: Return true if list box is visible.
• get(String key): Returns property of MSelectDBox instance
• set(String key, Any value): Sets new or update property of MSelectDBox instance

6. Events.

• init: fires when instance initialized
• onselect: fires when list item is selected
• onchange: fires when text input was changed
• onkeydown: same as original onkeydown event
• onkeyup: same as original onkeyup event
• input:empty: fires when text input become 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 "set" method with specified key. Example: instance.set("field", 100);
• get: Fires when calling "get" method. Example: instance.get("fieldName");
• get:field: Fires when calling "get" method with specified key. Example: instance.get("field", 100);
• afterSet:field: Fires after "get" method was called with specified key. The event ensures that the function will be executed after the assignment and will have access to new value;
• beforeSet:field: Fires before "get" method will be called with specified key.

Changelog:

2021-03-27

• Added more options.

2021-03-27

• Added more options.

2017-06-04

• add: event "autocomplete:empty"
• add: event "autocomplete:not-empty"

2017-05-20

• fix: iss5

2017-01-25

• bugfix

2017-01-08

• v1.1

2016-10-03

• JS refactor.

2016-09-02

• fix: CustomEvent, Event in old browsers

2016-09-01

• allows tap to close

2016-04-29

• bugfix

2016-04-27

• JS+demo update.

2016-03-23

• bugfix

2016-02-29

• fix: open/calcPosition();

2016-02-15

• fix: event/change

2016-02-13

• fix: constructor/arg.events

2016-02-02

• Added get,set events

 

---

This awesome jQuery plugin is developed by eugenegantz. For more Advanced Usages, please check the demo page or visit the official website.