Need help with awesomplete?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

LeaVerou
6.8K Stars 647 Forks MIT License 306 Commits 178 Opened issues

Description

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

Services available

!
?

Need anything else?

Contributors list

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:


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


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:

    Ada
    Java
    JavaScript
    Brainfuck
    LOLCODE
    Node.js
    Ruby on Rails

Or the following, if you don’t want to use a

, or if you don’t want to use IDs (since any selector will work in data-list):
  • Ada
  • Java
  • JavaScript
  • Brainfuck
  • LOLCODE
  • Node.js
  • Ruby on Rails

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.