Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
June 24, 2016 10:00
June 25, 2016 18:06
February 18, 2015 16:24
February 21, 2022 15:16
November 4, 2020 19:19
November 4, 2020 19:19
September 8, 2016 22:27
November 4, 2020 19:19
January 28, 2016 14:40
August 21, 2019 12:37
October 3, 2016 19:39


npm version Build Status Code Climate Test Coverage

Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers.


There are a few ways to obtain the needed files. Here are 2 of them:

  1. CDN server
  1. Another way to get up and running is by using yarn or npm:
yarn add awesomplete
npm install awesomplete --save

More information about the npm package can be found here.

Basic Usage

Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual tags:

<link rel="stylesheet" href="awesomplete.css" />
<script src="awesomplete.js" async></script>

Then you can add an Awesomplete widget by adding the following input tag:

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

Add class="awesomplete" for it to be automatically processed (you can still specify many options via HTML attributes) Otherwise you can instantiate with a few lines of JS code, which allow for more customization.

There are many ways to link an input to a list of suggestions. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:

<input class="awesomplete" list="mylist" />
<datalist id="mylist">
	<option>Ruby on Rails</option>

Or the following, if you don’t want to use a <datalist>, or if you don’t want to use IDs (since any selector will work in data-list):

<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">
	<li>Ruby on Rails</li>

There are multiple customizations and properties able to be instantiated within the JS. Libraries and definitions of the properties are available in the Links below.


JS Property HTML Attribute Description Value Default
list data-list Where to find the list of suggestions. Array of strings, HTML element, CSS selector (no groups, i.e. no commas), String containing a comma-separated list of items N/A
minChars data-minchars Minimum characters the user has to type before the autocomplete popup shows up. Number 2
maxItems data-maxitems Maximum number of suggestions to display. Number 10
autoFirst data-autofirst Should the first element be automatically Boolean false
listLabel data-listlabel Denotes a label to be used as aria-label on the generated autocomplete list. String Results List


Awesomplete is released under the MIT License. See LICENSE file for details.


The official site for the library is at

Documentation for the API and other topics is at

Created by Lea Verou and other fantastic contributors.