JSON Based jQuery Input Autocomplete Plugin - Autolist

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.