Fast Autocomplete Plugin For Text Field - Autocomplete Choice Input
File Size: | 119 KB |
---|---|
Views Total: | 840 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.