一个强大且高性能的jQuery自动完成插件，可帮助您创建可编辑的组合框，提供流畅高效的自动完成体验。

该插件使用户能够快速轻松地从具有数千个选项的下拉列表中选择多个条目。同时支持输入字段和本机选择框。

更多功能：

• 允许以各种方式定义数据集。
• 限制要显示的项目数。
• 键盘可访问性。

替代插件：

• 10个最佳多选插件
• 10个最佳自动完成和Typeahead JavaScript插件

如何使用它:

1.将自动完成选项输入插件的文件添加到网页中。

<!-- 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.调用文本字段上的函数，并在数据选项属性如下：

<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.您还可以用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.该插件还可以完美地与本地选择框配合使用。

<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.更多插件选项。

$('#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, 
  
});

预览截图

文本字段 快速自动完成插件 自动完成选项输入