Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/LeaVerou/awesomplete
Ultra lightweight, usable, beautiful autocomplete with zero dependencies.
https://github.com/LeaVerou/awesomplete
Last synced: about 2 months ago
JSON representation
Ultra lightweight, usable, beautiful autocomplete with zero dependencies.
- Host: GitHub
- URL: https://github.com/LeaVerou/awesomplete
- Owner: LeaVerou
- License: mit
- Created: 2015-02-18T21:24:14.000Z (almost 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2024-04-19T18:50:34.000Z (8 months ago)
- Last Synced: 2024-05-17T05:43:53.241Z (7 months ago)
- Language: JavaScript
- Homepage: http://leaverou.github.io/awesomplete/
- Size: 300 KB
- Stars: 6,937
- Watchers: 134
- Forks: 609
- Open Issues: 182
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - LeaVerou/awesomplete - Ultra lightweight, usable, beautiful autocomplete with zero dependencies. (JavaScript)
- awesome-javascript - awesomplete - Ultra lightweight, usable, beautiful autocomplete with zero dependencies. - ★ 6297 (Form Widgets)
- awesome-frontend-libraries - awesomplete
README
# Awesomplete
[](https://www.npmjs.com/package/awesomplete)
[](https://travis-ci.org/LeaVerou/awesomplete)
[](https://codeclimate.com/github/LeaVerou/awesomplete)
[](https://codeclimate.com/github/LeaVerou/awesomplete/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
```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
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):
```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