Tiny AJAX-Compatible Input Autocomplete Plugin - autocompleter

A fast, easy-to-use, fully configurable jQuery input autocomplete plugin that dynamically loads suggestions from local or remote JSON data (via AJAX).

More Features:

• Allows you to specify max results to show.
• Custom functions to handle the response data.

How to use it:

1. Include the stylesheet jquery.autocompleter.css and JavaScript jquery.autocompleter.js on the page.

<link rel="stylesheet" href="css/jquery.autocompleter.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="js/jquery.autocompleter.js"></script>

2. Attach the autocompleter to your input field and define the data source as follows:

<input id="autocompleter" name="country" type="text" value="" />

// from local JSON data
var country_list = ["Afghanistan","Albania","Algeria"]
$("#autocompleter").autocompleter(country_list, {
  // options here
});

// from remote JSON data
// the script must return a valid JSON array
var country_list = "country_list.php";
$("#autocompleter").autocompleter(country_list, {
  // options here
});

3. Include the stylesheet jquery.autocompleter.css and JavaScript jquery.autocompleter.js on the page.

$("#autocompleter").autocompleter(dataSource, {

  // maximum number of results to show
  maxResults: 0,

  // minumum number of characters to trigger the suggestion list
  minChars: 1,

  // timeout in ms
  timeout: 500,

  // custom match function
  matchRegexp: function(value, escape){return RegExp(escape(value), 'i')},
  matchValue:  defaultMatchValue,

  // custom display function
  itemDisplay: options['matchValue'] || defaultMatchValue,

  // custom function that returns a value for the request
  itemValue:   null,

  // default value for the hidden input
  hiddenValue: '',

  // empty value when itemValue is used
  emptyValue: '',

  // custom function to handle the AJAX requests
  ajaxData: function(value){return {value:value};}
  
});

Changelog:

2024-06-06

• rename variants to items

2024-05-30

• Fixed case-insensitive search

2024-05-29

• renamed some variables

2024-05-22

• added minified JS & CSS files

2024-05-21

• fixed sets value

---

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