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:
- CDN server
- Another way to get up and running is by using
yarn add awesomplete
npm install awesomplete --save
More information about the npm package can be found here.
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:
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:
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):
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 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.