Usage

The Advanced Datalist Input 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. 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 Datalist Input 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: '300'
}];
$('.advanced_datalist_input').advancedInput(params);
});

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
  • size: dimensions of the plugin. Possible values: any size. Default value:300px