awesomplete

# Awesomplete 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 ```sh https://cdnjs.com/libraries/awesomplete ``` 2. Another way to get up and running is by using `yarn` or `npm`: ```sh yarn add awesomplete ``` ```sh npm install awesomplete --save ``` More information about the npm package can be found [here](https://www.npmjs.com/package/awesomplete). ## Basic Usage Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual tags: ```html ``` Then you can add an Awesomplete widget by adding the following input tag: ```html ``` 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: ```html ``` 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): ```html

• 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][1] file for details. ## Links 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. [1]: https://github.com/LeaVerou/awesomplete/blob/gh-pages/LICENSE