Ultra lightweight, usable, beautiful autocomplete with zero dependencies.
JavaScript HTML CSS
Permalink
Failed to load latest commit information.
prism Fix: load Prism files from local sources Dec 30, 2015
test add test Sep 26, 2016
.codeclimate.yml Remove prism.js files from Code Climate checks Jan 2, 2016
.eslintrc Consistent quotes style Jun 24, 2016
.gitignore Split styles into a less opinionated base stylesheet and a theme styl… Sep 8, 2016
.travis.yml Automatic npm release on tagged commits Jun 25, 2016
CHANGELOG.md Update changelog Jun 25, 2016
CONTRIBUTING.md Split styles into a less opinionated base stylesheet and a theme styl… Sep 8, 2016
LICENSE Initial commit Feb 18, 2015
README.md Add npm badge Mar 16, 2016
awesomplete.base.css Split styles into a less opinionated base stylesheet and a theme styl… Sep 8, 2016
awesomplete.css Feature: Sourcemaps (#16963) Sep 8, 2016
awesomplete.css.map Feature: Sourcemaps (#16963) Sep 8, 2016
awesomplete.js Scroll to highlighted element when list container height is fixed (#1… Dec 12, 2016
awesomplete.min.js Feature: Sourcemaps (#16963) Sep 8, 2016
awesomplete.min.js.map Feature: Sourcemaps (#16963) Sep 8, 2016
awesomplete.theme.css Split styles into a less opinionated base stylesheet and a theme styl… Sep 8, 2016
bower.json Removed version in bower.json Mar 9, 2016
gulpfile.js Feature: Sourcemaps (#16963) Sep 8, 2016
index.html Add github star button Oct 3, 2016
index.js Tell eslint about valid globals Jan 2, 2016
karma.conf.js Big tests cleanup Jan 28, 2016
package.json Feature: Sourcemaps (#16963) Sep 8, 2016
style.css Position Github star Oct 3, 2016

README.md

Awesomplete

npm version Build Status Code Climate Test Coverage

http://leaverou.github.io/awesomplete/

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

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>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 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>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 multiple customizations and properties able to be instantiated within the JS. Libraries and definitions of the properties are available in the Links below.

License

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

Links

The official site for the library is at http://leaverou.github.io/awesomplete/.

Documentation for the API and other topics is at http://leaverou.github.io/awesomplete/#api.

Created by Lea Verou and other fantastic contributors.