Multipurpose jQuery Input Autocomplete Plugin - Easy Autocomplete

File Size: 227 KB
Views Total: 17782
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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)

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.