About

Advanced Multi Select Datalist plugin makes unwieldy select boxes much more user-friendly. The Advanced Multi Select Datalist Plugin is used to provide a feature of "multiselect" on input elements. Users will see a drop-down list of pre-defined options as they input data. Advanced dropdown search box allow you to create filterable and search for specific words in dropdown box. When typing in the filter, any rows that do not contain the filter will be hidden. Autocomplete is a flexible jquery search that provides suggestions while you type into the field. Key benefits:

  • Filter and search works correctly under all browsers including Edge, old and new versions of Safari, Opera, Internet Explorer, etc.
  • Multiselect, allows a user to remove items from the list.
  • Easy usage
Screenshoot
Installation and Activation
Installation and Activation
Source modification
Source modification
Deactivation
Deactivation
Remove Plugin
Remove Plugin
About Plugin
About Plugin
Usage
Admin Menu
Admin Menu
Shortcode
Shortcode
Plugin Settings
Plugin Settings
Usage

The Advanced Multi Select Datalist Plugin is used to provide an "autocomplete"" feature on input elements. Users will see a drop-down list of pre-defined options as they input data. Moreover, plugin allows a user to remove items from the list.

The plugin has the following appearance:


Clicking on the arrow in the right side, you can open or close the list.


When you type any letter or word in the input, will be done a filtration and in the list will stay only matching records. On any list item mouse left-click, that item will be displayed in the input. It is also possible to select more than one items, which also will be removed from the list. Selected item of the list will be removed from the list, if you click on the remove button appeared on the right side, that element will disappear from the input and appear into the initial list. The plugin allows to do a new filtration after selecting an item.

The call of Advanced Multi Select Datalist JavaScript Plugin is made in the following way:

$(document).ready(function() {
var mass = [
{id: 1, text: "My Company"},
{id: 2, text: "IT"},
{id: 3, text: "Team lider(Caesar Vance)"},
{id: 4, text: "Programmers"},
{id: 5, text: "Airi Satou"},
{id: 6, text: "Ashton Cox"},
{id: 7, text: "Hardware"},
{id: 8, text: "Angelica Ramos"},
{id: 9, text: "Sales"},
{id: 10, text: "Sales manager"},
{id: 11, text: "Angelica Ramos"},
{id: 12, text: "Cedric Kelly"},
{id: 13, text: "Famely my"}
];
var params = [{
'data': mass,
'color': 'black',
'size': '350'
}];
$('.advanced_datalist_multy_select').multiInput(params);
});

Where:

Where params is the JQuery object including input data and settings. The detailed example of params is the following:

  • data: array of the list
  • color: color of the plugin. Possible values: all colors. Default value: black
  • width: size of the plugin width. Possible values: bigger than 250px. Default value:350px
  • height: size of the plugin height. Possible values: bigger than 250px. Default value:500px