Multipurpose jQuery Input Autocomplete Plugin - Easy Autocomplete

A simple yet robust jQuery plugin that makes it easier to create autocomplete dropdown list for text input fields.

Features:

• Supports local or remote data: JS, JSON, XML and Remote.
• Character highlighting.
• 7 color themes: dark, blue, purple, yellow, blue-light, green-light and bootstrap
• Custom show/hide animations: fade, slide and normal.
• Easy to implement.

Basic usage:

1. Import jQuery library and the jQuery easyAutocomplete plugin's JS & CSS files into the web page.

<link href="easy-autocomplete.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.easy-autocomplete.min.js"></script>

2. Specify the data source together with other options in the option parameter.

var options = {

  // ARRAY, JS, JSON, XML or Remote data provider
  url: "countries.json",

  // More options...
  
};

3. Call the plugin on the text input field and done.

$("input").easyAutocomplete(options);

4. Full plugin options.

// an array of data
data: "list-required",

// data source
url: "list-required",

// json or xml
dataType: "json",

// for complex data
listLocation: function(data) {
  return data;
},

// node name for xml data type
xmlElementName: "",

// get value out of the element
getValue: function(element) {
  return element;
},

autocompleteOff: true,

// Define input's placeholder.
placeholder: false,

// ajax callback function
ajaxCallback: function() {},

matchResponseProperty: false,

list: {
sort: {
  enabled: false,
  method: function(a, b) {
    a = defaults.getValue(a);
    b = defaults.getValue(b);
    if (a < b) {
      return -1;
    }
    if (a > b) {
      return 1;
    }
    return 0;
  }
},

maxNumberOfElements: 6,

hideOnEmptyPhrase: true,

// show only elements that match value written in the input field
match: {
  enabled: false,
  caseSensitive: false,
  method: function(a, b) {
    a = defaults.getValue(a);
    b = defaults.getValue(b);

    if (a === b){
      return true;
    }  
    return false;
  }
},

// animations
showAnimation: {
  type: "normal", //normal|slide|fade
  time: 400,
  callback: function() {}
},

hideAnimation: {
  type: "normal",
  time: 400,
  callback: function() {}
}

/* Events */
onClickEvent: function() {},
onSelectItemEvent: function() {},
onLoadEvent: function() {},
onChooseEvent: function() {},
onKeyEnterEvent: function() {},
onMouseOverEvent: function() {},
onMouseOutEvent: function() {}, 
onShowListEvent: function() {},
onHideListEvent: function() {}

},

// highlight matched phrase on elements list
highlightPhrase: true,

// dark, blue, purple, yellow, blue-light, green-light, bootstrap
theme: "",

// additional CSS classes
cssClasses: "",

minCharNumber: 0,

requestDelay: 0,

adjustWidth: true,

ajaxSettings: {},

loggerEnabled: true,

template: "",

categoriesAssigned: false,

categories: [{
  maxNumberOfElements: 4
}]

Changelog:

v1.4.0 (2019-10-03)

• Fixed UTF-8 characters specially on iPhone devices.
• Fixed Doesn't work when the id contains colons

v1.3.5 (2016-05-04)

• update

v1.3.4 (2016-04-29)

• Fixed match issues.
• Fixed case sensitivity.
• Changed method for adding functions to jQuery

v1.3.3 (2015-11-28)

• Update.

v1.3.2 (2015-11-17)

• Template description can now be a function.

v1.3.1 (2015-11-14)

• When ajax returns no data, item list disappears.
• Container is hidden when there are no items

2015-10-30

• v1.3.0
• bugfix.
• added more options and callbacks

2015-10-27

• v1.2.0
• Added parameter hideOnEmptyPhrase

2015-10-08

• Plugin shows message when input field does not exist.

2015-10-03

• Added events onShowListEvent & onHideListEvent.
• Improved styles for categories-headers.

2015-10-01

• Added mechanism to show selected item.
• listLocation now works with xml files
• Categories works with local data.

2015-09-22

• v1.1.5
• Categories works now with objects and XML files.

2015-09-19

• Added option event 'onSelectItem'.

2015-08-26

• Added option to set minimal number of characters in input field
• Fixed bug where option property data + listLocation did not worked
• Plugin now displays properties that does not exist

2015-05-18

• Fix round theme issues

2015-05-17

• ADD Ajax parameters.
• Match response feature

2015-05-08

• Removed slow dom manipualtion in list creation.

2015-05-07

• Removed slow dom manipualtion in list creation.

2015-05-05

• added new themes.

About author:

Author: Łukasz Pawełczak

Website: http://easyautocomplete.com

---

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