• Stars
    star
    6,964
  • Rank 5,627 (Top 0.2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

Awesomplete

npm version Build Status Code Climate Test Coverage

https://leaverou.github.io/awesomplete/

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

Installation

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

  1. CDN server
https://cdnjs.com/libraries/awesomplete
  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>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.

Options

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

License

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

Links

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

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

Created by Lea Verou and other fantastic contributors.

More Repositories

1

prefixfree

Break free from CSS prefix hell!
JavaScript
3,841
star
2

animatable

One property, two values, endless possiblities
HTML
2,580
star
3

bliss

Blissful JavaScript
JavaScript
2,390
star
4

inspire.js

Lean, hackable, extensible slide deck framework. Previously known as CSSS.
JavaScript
1,717
star
5

color.js

Color conversion & manipulation library by the editors of the CSS Color specifications
JavaScript
1,581
star
6

css3patterns

The popular CSS3 patterns gallery, now on Github :)
HTML
1,415
star
7

stretchy

Form element autosizing, the way it should be
JavaScript
1,275
star
8

dabblet

An interactive CSS playground
JavaScript
817
star
9

dpi

dpi love - Easily find the DPI/PPI of any screen
JavaScript
748
star
10

multirange

A tiny polyfill for HTML5 multi-handle sliders
CSS
605
star
11

conic-gradient

Polyfill for conic-gradient() and repeating-conic-gradient()
HTML
486
star
12

rety

Record typing on one or more editors and replay it at will, to simulate live coding
JavaScript
383
star
13

parsel

A tiny, permissive CSS selector parser
TypeScript
361
star
14

md-block

A custom element for rendering stylable (light DOM) Markdown
JavaScript
283
star
15

regexplained

JavaScript
273
star
16

chainvas

Make APIs suck less
HTML
262
star
17

css3test

How does your browser score for its CSS3 support?
JavaScript
214
star
18

css.land

Hands on CSS demos
HTML
213
star
19

nudeui

Lea's kitchen sink of form components. WIP. Try at your own risk or come back later.
JavaScript
204
star
20

HTML5-Progress-polyfill

Polyfill for the HTML5 <progress> element
JavaScript
178
star
21

rgba.php

Script for automatic generation of one pixel alpha-transparent images for non-RGBA browsers to easily emulate RGBA colors in backgrounds
PHP
176
star
22

cubic-bezier

Playground for CSS bezier-based timing functions
JavaScript
169
star
23

markapp

Building apps by authoring HTML
CSS
134
star
24

duoload

Simple, client-side comparison of website loading behavior
CSS
130
star
25

play.csssecrets.io

CSS Secrets Book live demos
CSS
119
star
26

talks

All my talks (move still in progress)
HTML
92
star
27

incrementable

Increment length values in textfields
JavaScript
83
star
28

corner-shape

Play with corner-shape before it’s implemented!
JavaScript
75
star
29

StronglyTyped

A library for strongly typed properties & global variables in JavaScript
JavaScript
70
star
30

css-colors

Share & convert CSS colors
JavaScript
62
star
31

bubbly

[Unfinished] CSS speech bubbles made easy!
JavaScript
50
star
32

html-syntax-guidelines

48
star
33

whathecolor

CSS
47
star
34

css-almanac

Repo for planning & voting on which stats to study
SCSS
34
star
35

forkgasm

Lea & Chris’ culinary adventures
HTML
33
star
36

talks-list

Automatic talks list, generated from JSON. Unmaintained, use Mavo instead.
JavaScript
29
star
37

chroma-zone

Slides for my talk “The Chroma Zone: Engineering Color on the Web”
CSS
21
star
38

htest

Declarative, boilerplate-free unit testing
JavaScript
19
star
39

lea.verou.me

Towards a serverless lea.verou.me! WIP, either help out or move along.
JavaScript
17
star
40

mavoice

Prioritize features for open source projects
CSS
15
star
41

issue-closing

View issue closing stats for any repo!
HTML
14
star
42

missing-slice

The Missing Slice talk slides
HTML
12
star
43

hci.mit.edu

WIP. Preview:
HTML
12
star
44

tweeplus

Longer tweets, no strings attached.
JavaScript
11
star
45

brep

Write batch find & replace scripts that transform files with a simple human-readable syntax
JavaScript
10
star
46

leaverou.github.io

Just a data repo, I don't intend to put a website here for now
10
star
47

mygraine

A migraine tracker, built with Mavo. Work in progress, come back later.
HTML
9
star
48

bytesizematters

JavaScript
8
star
49

refresh-it

Refresh page resources without a page reload. An alternative to the heavyweight processes that take over your local server.
JavaScript
8
star
50

uist2017

Website for ACM UIST 2017
HTML
6
star
51

homesearch

A sample Mavo app for people looking for housing to store info about and compare the homes they are trying to decide between
HTML
6
star
52

feedback

Easily save & share lists of tweets and own your data. Made with Mavo.
HTML
5
star
53

eleventy-plugin-citations

JavaScript
5
star
54

my-lifesheets

HTML
4
star
55

expenses

App to generate summary of expenses, made with Mavo
CSS
4
star
56

rework-utils

Utilities to explore ASTs generated by the Rework CSS parser. Originally written for the Web Almanac.
JavaScript
3
star
57

mv-data

3
star
58

testlib

Just a test, move along
JavaScript
2
star
59

blissful-hooks

Deep extensibility for all!
JavaScript
2
star
60

labelizer

Manage repo labels (WIP)
JavaScript
1
star
61

contacts

1
star
62

zoe-eats

Baby food log, made with Mavo
1
star
63

zoelearns.com

JavaScript
1
star
64

website

1
star
65

pathed

Get/set/subset deep objects via readable, extensible paths. WIP.
JavaScript
1
star