Press "Enter" to skip to content

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).

jquery tags input autocomplete ajax, jquery autocomplete plugin with ajax, jquery autocomplete ajax, jquery autocomplete dropdown

[Bootstrap 5] Autocomplete Functionality for Input Fields in Vanilla Javascript

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, bootstrap tags input autocomplete ajax, bootstrap 4 autocomplete


See Demo And Download

Official Website(gozoro): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.