EasyAutocomplete - A Lightweight jQuery Autocomplete Plugin

There are quite a few autocomplete plugins available online, but all of them have their own strength and weaknesses. Among all options, the most popular one would be jQuery Autocomplete. It bundled with a lot of useful features and configuration but it's bulky. I was looking for a lightweight solution with the features I need.

I needed a few features:

• It has to be lightweight because I'm building a mobile app with offline application mode.
• It parses local JSON data and able to assign name-value combinations.
• It has relevant callback events for data manipulation when user interact with the plugin.
• It need to filter the data in client-side.

Then I found EasyAutocomplete. With all the features and configurable options, it can easily become one of the best autocomplete plugins available for free.

Example

I had a great time working wit EasyAutocomplete and I customised it to my requirements.

The following example will render icon next to each selection.

JSON File - countries.json

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

Javascript

This is what you can do with EasyAutocomplete.

Matching capability is disabled by default. Most of the time, matching is done through server-side, but in my scenario, I needed it to perform the matching in client-side.

Here's how we do it, by enabling matching, I can also define the matching algorithm. The following example shows how we define an algorithm that matches the string from the start instead of any occurrences within the string.

var options = {
    url: "resources/countries.json",
    getValue: "name",
    list : {
      match: {
        enabled: true,
        method: function (element, phrase) {
          if (element.indexOf(phrase) === 0) {
            return true;
          } else {
            return false;
          }
        },  
      }  
    }
  }
};

$("#template-icon-right").easyAutocomplete(options);

Features

• Supports local and remote data sets (JSON, XML and plain text).
• Allows to search, sort and match the response phrase.
• Matching algorithm can be modified.
• Supports custom list templates, which can be made to display thumbnails, icons and images.
• Supports different colour themes
• Support many callback events.
• Good documentation with examples.
• Minified version is approximately 16KB.
• and a few more...

SPECIFICATIONS & DOWNLOAD

• TAGS:
• Form
• Javascript
• jQuery