EasyAutocomplete

JQuery autocomplete plugin.

EasyAutocomplete is a highly configurable jquery autocomplete plugin. It supports local and remote data sets (JSON, XML and plain text), uses ajax method calls, allows to search, sort and match the response phrase. It lets you use a couple of different list templates and even offers you possibility to create your own list template. As one of the best jquery autocomplete plugins, EasyAutocomplete supports callback handles, so it can be configured to run functions on specific events. It has a couple of interesting, clean, modern build in css styles, so your autocomplete list can look really professional (no images requirement). You can check them out in themes - section. EasyAutocompelte extension is written in javascript and has only one dependency, which is, obviously jQuery.

If you are interested in using this jQuery autocomplete plugin on your site, you can find out more details in the EasyAutocomplete - jquery autocomplete - guide section. You can find more interesting examples in the EasyAutocomplete - jquery autocomplete - examples section.

EasyAutocomplete has been released under the terms of the MIT License.

Feel free to contact me with any questions or enquiries, as FAQ will be published in a due course. Also, I will truly appreciate your letting me know you are using my autosuggest extension. Should you find any bug, let me know about it through Report a bug.

 

Example code

Javascript:

var options = {

  url: "resources/countries.json",

  getValue: "name",

  list: {	
    match: {
      enabled: true
    }
  },

  theme: "square"
};

$("#countries").easyAutocomplete(options);

HTML:

<input id="countries"/>

countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Aland Islands", "code": "AX"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  ...
 ]

Example code

Javascript:

var options = {

  url: "resources/countries.json",

  getValue: "name",

  list: {
    match: {
      enabled: true
    },
    maxNumberOfElements: 8
  },

  template: {
    type: "custom",
    method: function(value, item) {
      return "<span class='flag flag-" + (item.code).toLowerCase() + "' ></span>" + value;
    }
  },

  theme: "round"
};

$("#countries-flags").easyAutocomplete(options);

HTML:

<input id="countries"/>

countries.json

[ 
  {"name": "Afghanistan", "code": "AF"}, 
  {"name": "Aland Islands", "code": "AX"}, 
  {"name": "Albania", "code": "AL"}, 
  {"name": "Algeria", "code": "DZ"}, 
  {"name": "American Samoa", "code": "AS"}, 
  ...
 ]

In this example I have used CSS styles flags.css and flag icons flags.png.

Example code

Javascript:

var options = {

  url: "resources/sheroes.json",

  getValue: "name",

  cssClasses: "sheroes",

  template: {
    type: "iconRight",
    fields: {
      iconSrc: "icon"
    }
  },

  list: {
    showAnimation: {
      type: "slide"
    },
    hideAnimation: {
      type: "slide"
    }
  }

};

$("#sheroes").easyAutocomplete(options);

HTML:

<input id="sheroes"/>

sheroes.json

[ 
  {"name": "Black Widow", "icon": "images/sheroes/Black_Widow.png"},
  {"name": "Captain America", "icon": "images/sheroes/Captain_America.png"},
  ...
 ]

Super heroes example has been prepared with use of awesome set of icons created by deleket (icon set is released under the CC license).