Javascript

Awesomplete - Ultra Lightweight and Highly Customizable Autocomplete Javascript Plugin

Written by Kevin Liew on 10 Mar 2015
41,078 Views • Shares
2 comments

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

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Gwen 2 years ago
I'm glad I've found this very useful blog, I'm an IT graduate and I really want to pursue a career as a front end web developer.
Reply
Satheesh Kumar 12 months ago
Would you please tell me how to use the multiple coma separated version of awesomeplete. I don't know where to place the javascript. i tried in head and in body and it doesn;t work
Reply