JSON Based jQuery Input Autocomplete Plugin - Autolist
File Size: | 14.2 KB |
---|---|
Views Total: | 3020 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Autolist is a lightweight AJAX-driven jQuery autocomplete plugin that provides suggestions in a dropdown list when the user types something in the input field. The plugin has the ability to handle remote data resources by polling an AJAX path which delivers JSON data asynchronously.
How to use it:
1. Add references to jQuery library and the jQuery autolist plugin as shown below:
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="jquery.autolist.js"></script>
2. Create the autocomplete input and datalist
in the webpage.
<input type="text" list="projects" name="project" value="" placeholder="type something" autofocus autocomplete="off"> <datalist id="projects"></datalist>
3. Initialize the plugin and pass the JSON Url as the first parameter to the autolist
method.
$("input[name='project']").autolist("demo.json", { // options here });
4. Plugin's default options to config the autocomplete functionality.
$("input[name='project']").autolist("demo.json", { // the query part of the JSON API call query: "q", // minimum length of the query minLength: 3, // delay time in milliseconds delay: 500, // trim the input value trimValue: true, // get the autocomplete items from the API result object getItems: function (response) { return response; }, // get the name that will be displayed from an item getName: function (item) { return item; } });
This awesome jQuery plugin is developed by Tihauan. For more Advanced Usages, please check the demo page or visit the official website.