Wallogit.com
2017 © Pedro PelĂĄez
Composer library forked from Github LeaVerou/awesomplete
, (*1)
https://leaverou.github.io/awesomplete/, (*2)
Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers., (*3)
There are a few ways to obtain the needed files. Here are 2 of them: 1. CDN server, (*4)
https://cdnjs.com/libraries/awesomplete
yarn or npm:yarn add awesomplete
npm install awesomplete --save
More information about the npm package can be found here., (*5)
Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual tags:, (*6)
<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:, (*7)
<input class="awesomplete"
data-list="Ada, Java, JavaScript, Brainfuck, LOLCODE, Node.js, Ruby on Rails" />
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., (*8)
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:, (*9)
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
<option>Ada</option>
<option>Java</option>
<option>JavaScript</option>
<option>Brainfuck</option>
<option>LOLCODE</option>
<option>Node.js</option>
<option>Ruby on Rails</option>
</datalist>
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):, (*10)
<input class="awesomplete" data-list="#mylist" />
<ul id="mylist">
<li>Ada</li>
<li>Java</li>
<li>JavaScript</li>
<li>Brainfuck</li>
<li>LOLCODE</li>
<li>Node.js</li>
<li>Ruby on Rails</li>
</ul>
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., (*11)
| 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][1] file for details., (*12)
The official site for the library is at https://leaverou.github.io/awesomplete/., (*13)
Documentation for the API and other topics is at https://leaverou.github.io/awesomplete/#api., (*14)
Created by Lea Verou and other fantastic contributors., (*15)
Pierre