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

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.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


Create a Beautiful Mobile App-Like Sliding Menu | mmenu.js

Mmenu is the best JavaScript plugin for both on and off-canvas(hamburger menu) menus with sliding submenus for your website and web app. It is very customizable with…

Leave a Reply

Your email address will not be published. Required fields are marked *