Fast Autocomplete Plugin For Text Field - Autocomplete Choice Input

A powerful and high-performance jQuery autocomplete plugin that helps you creat editable combo boxes with smooth and efficient autocomplete experiences.

This plugin enables users to quickly and easily select multiple entries from a dropdown list with thousands of options. Supports both input fields and native select boxes.

More Features:

• Allows defining your dataset in various ways.
• Limits the number of items to show.
• Keyboard accessibility.

Alternative Plugins:

• 10 Best Multiple Select Plugins
• 10 Best Autocomplete & Typeahead JavaScript Plugins

How to use it:

1. Add the Autocomplete Choice Input plugin's files to the webpage.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>
 
<!-- Autocomplete Choice Input Plugin -->
<script src="/path/to/autocomplete-choice-input.min.js"></script>
<link rel="stylesheet" href="/path/to/autocomplete-choice-input.min.css" />

2. Call the function on your text field and define the options in the data-options attribute as follows:

<input type="text" id="example" value="val-2;val-3"
  data-options="{"val-1":"jQuery","val-2":"Script","val-3":"Net"}">

$(function(){
  $('#example').autocompleteChoiceInput();
});

3. You're also allowed to specify the dataset in JavaScript.

$('#example').autocompleteChoiceInput({
  data: {"val-1":"jQuery","val-2":"Script","val-3":"Net"}
});

// OR
$('#example').autocompleteChoiceInput({
  data: ["jQuery", "Script", "Net"]
});

// OR
$('#example').autocompleteChoiceInput({
  endpoint: "/path/to/fetchData/"
});

4. The plugin also works perfectly with native select boxes.

<select id="example">
  <option value="val-1">jQuery</option>
  <option value="val-2" selected="selected">Script</option>
  <option value="val-3">Net</option>
</select>

$('#example').autocompleteChoiceInput({
  // options here
});

5. More plugin options.

$('#example').autocompleteChoiceInput({

  // min amount of characters to trigger the autocomplete
  minLength: 2, 

  // max number of items
  maxItems: 10,

  // store the selected items as strings; else is an array
  singleText: false, 
  singleTextDelimiter: ";", 

  // enable keyboard accessibility
  keyboardSupport: true,

  // allow you to add new items
  allowAdd: false, 
  addText: "Create %item%...", 
  addedPrefix: "",

  // allows you to edit items
  allowEdit: false, 
  
});

---

This awesome jQuery plugin is developed by AlesJiranek. For more Advanced Usages, please check the demo page or visit the official website.