Tagbox

Select items from lists with autocomplete

View the Project on GitHub jbt/tagbox

Simple token-based input with fuzzy matching

Example: Select a list of countries

United Kingdom×
United States×
France×

Value: GB,US,FR

$('#example_1').tagbox({
  items: countryList,
  rowFormat: '{{text}}',
  tokenFormat: '{{text}}',
  searchIn: [ 'text', 'code' ]
});

Example: Choose just one country

United Kingdom×

Value: GB

$('#example_2').tagbox({
  items: countryList,
  className: 'single',
  maxItems: 1,
  rowFormat: '{{text}}',
  tokenFormat: '{{text}}',
  searchIn: [ 'text', 'code' ]
});

Example: Allow new items

Try typing something not already in the list.

cat×
dog×

Value: cat,dog

$('#example_3').tagbox({
  items: [ { value: 'cat' }, { value: 'dog' }, /* etc... */ ],
  allowNew: true
});

Options

Download