A jQuery AJAX-Compatible Input Autocomplete Plugin | autocompleter

jquery-autocompleter is the jQuery plugin auto-complete. A fast, easy-to-use, and fully configurable plugin for jQuery input auto-completion that loads suggestions dynamically from local or remote JSON data (via AJAX).

Must Read: Bootstrap 4 Input Autocomplete Suggestions From Data List And AJAX

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
});
$("#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};}
  
});

Must Read: JQuery Plugin That Allows Multiple Autocomplete in Input

Options

  • maxResults: Maximum number of suggestions (0 – no limits). The default value is 0.
  • maxResults: Maximum number of suggestions (0 – no limits). The default value is 0.
  • minChars: Minimum number of characters for the suggestions. The default value is 1.
  • timeout: Keyboard input timeout. The default value is 500 ms.
  • matchRegexp: The function must return a regexp object used for filtering.
  • matchValue: The function must return a value used for filtering.
  • itemDisplay: The function must return a value used for displaying suggestions.
  • itemValue: You can set a function that returns a value for the request. The default value is “matchValue”.
  • emptyValue: Empty value when itemValue is used.
  • ajaxData: Function must be returns default ajax-request data.
  • hiddenValue: Default value for the hidden input.

Read More –

Simple Input Mask Component for Vue.js and vanilla JS | Maska
Simple Accessible Autocomplete With Asynchronous Data Fetch for Vanilla Javascript


See Demo And Download

Official Website(gozoro): Click Here

This superior jQuery/javascript plugin is developed by gozoro. For extra Advanced Usage, please go to the official website.

Share