Multi-Select & Autocomplete Dropdown Plugin For jQuery - MSelectDialogBox

File Size: 61.9 KB
Views Total: 46250
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.