Awesomplete - Ultra Lightweight and Highly Customizable Autocomplete Javascript Plugin

Autocomplete is a very useful form user interface. By suggesting potential data, it helps user to fill in the form field correctly, hence reduce garbage data. Not just that, it also saves some precious times too.

There are many solutions out there, for example the Autocomplete from jQuery UI. This official jQuery Autocomplete plugin is good, no doubt about it, but it's heavy weight, even though it allows custom download, but I still think it's bulky.

Introducing Awesomplete - Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Created by the reputable CSS3 guru Lea Verou, Awesomplete is really awesome. However, it won't work in IE8 and mixed result in IE9 and IE10. But I'm sure it will be fixed sooner or later.

Awesomplete

It's designed to be markup friendly and easy to use. For basic setup, you don't even need to write any Javascript code. You can use it with this markup:

<input class="awesomplete"
       data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />

Alternatively, you can define the list like this:

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
	<option>Ada</option>
	<option>Java</option>
	<option>JavaScript</option>
	<option>Brainfuck</option>
	<option>LOLCODE</option>
	<option>Node.js</option>
	<option>Ruby on Rails</option>
</datalist>

// OR, like this:

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">
	<li>Ada</li>
	<li>Java</li>
	<li>JavaScript</li>
	<li>Brainfuck</li>
	<li>LOLCODE</li>
	<li>Node.js</li>
	<li>Ruby on Rails</li>
</ul>	

There are plenty of ways, you can read it here.

Features

It's light weight, but the features and customization aren't compromised. You can do plenty of customization with Awesomplete. It has 4 basic configurations:

• list: define where to find the list of suggestion
• minChars: Minimum characters the user has to type before the autocomplete popup shows up.
• maxItems: Maximum number of suggestions to display.
• autoFirst: Determine if the first item in the returned result should be highlighted by automatically.

Also, it has a few useful extendable properties to allow you to completely change the way Awesomplete works. Followed by a set of events and API, there's nothing you can't do with Awesomplete. You can check that out in the advanced examples section.

SPECIFICATIONS & DOWNLOAD

• TAGS:
• Form
• Javascript
• Plugin