Select items from lists with autocomplete
$('#example_1').tagbox({
items: countryList,
rowFormat: '{{text}}',
tokenFormat: '{{text}}',
searchIn: [ 'text', 'code' ]
});
$('#example_2').tagbox({
items: countryList,
className: 'single',
maxItems: 1,
rowFormat: '{{text}}',
tokenFormat: '{{text}}',
searchIn: [ 'text', 'code' ]
});
$('#example_3').tagbox({
items: [ { value: 'cat' }, { value: 'dog' }, /* etc... */ ],
allowNew: true
});
items (Array) - Array of item objects to choose from.valueField (String) - property name to use from each item as the value.searchIn (Array / Object) - list of fields to search in each item when filtering. Alternatively { a: 100, b: 10 }-type priority list (property a has weight 100, b weight 10).rowFormat (String) - formatted string to use for the text in dropdown rows, with all {{value}} formats interpolated with the corresponding value property of the relevant item.tokenFormat (String) - formatted string to use for text in tokens, formatted as above.itemClass (String) - class to add to each row in dropdown.className (String) - class to add to tagbox wrapper.delimiter (String) - string delimeter used to join values.maxHeight (Number) - maximum height in pixels allowed for the dropdown list.dropdownContainer (String) - CSS selector for which element to insert the dropdown list into.maxListItems (Number) - maximum number of items to show in the dropdown list.maxItems (Number) - maximum number of items allowed to be selected at once (-1 for unlimited).allowDuplicates (Boolean) - whether to allow items to be selected more than onceemptyText (String) - text to show when no items have been found.autoShow (Boolean) - whether to show the dropdown when the input is focussed.allowNew (Boolean) - whether to allow new items to be created.createNew (Function) - callback function to create a new template item given a text inputnewText (String) - formatted string to show in dropdown list for template new item. {{txt}} will be replaced with the input text.