Awesomplete

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

LeaVerou/awesompleteleaverou.github.io/awesomplete/awesomplete

README

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
  1. ```sh
  2. https://cdnjs.com/libraries/awesomplete
  3. ```
2. Another way to get up and running is by using yarn or npm:
  1. ```sh
  2. yarn add awesomplete
  3. ```
  1. ```sh
  2. npm install awesomplete --save
  3. ```
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:
  1. ``` html
  2. <link rel="stylesheet" href="awesomplete.css" />
  3. <script src="awesomplete.js" async></script>
  4. ```
Then you can add an Awesomplete widget by adding the following input tag:
  1. ``` html
  2. <input class="awesomplete"
  3.        data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />
  4. ```
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:
  1. ``` html
  2. <input class="awesomplete" list="mylist" />
  3. <datalist id="mylist">
  4. <option>Ada</option>
  5. <option>Java</option>
  6. <option>JavaScript</option>
  7. <option>Brainfuck</option>
  8. <option>LOLCODE</option>
  9. <option>Node.js</option>
  10. <option>Ruby on Rails</option>
  11. </datalist>
  12. ```
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):
  1. ``` html
  2. <input class="awesomplete" data-list="#mylist" />
  3. <ul id="mylist">
  4. <li>Ada</li>
  5. <li>Java</li>
  6. <li>JavaScript</li>
  7. <li>Brainfuck</li>
  8. <li>LOLCODE</li>
  9. <li>Node.js</li>
  10. <li>Ruby on Rails</li>
  11. </ul>
  12. ```
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

JSHTMLDescriptionValueDefault
---------------------------------------------------------------------------------------------------------------------------
`list``data-list`WhereArrayN/A
`minChars``data-minchars`MinimumNumber`2`
`maxItems``data-maxitems`MaximumNumber`10`
`autoFirst``data-autofirst`ShouldBoolean`false`
`listLabel``data-listlabel`DenotesStringResults

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