How to make use of it:

1. Include the stylesheet jquery.autocompleter.css and JavaScript jquery.autocompleter.js on the web 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 info supply 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 web 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};}
  
});

Tiny AJAX-Compatible Input Autocomplete Plugin, jquery-autocompleter Github, jquery autocomplete dropdown ajax

See Demo And Download