Download the PHP package net-tools/awesomplete without Composer
On this page you can find all versions of the php package net-tools/awesomplete. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package 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:
-
CDN server
- Another way to get up and running is by using
yarn
ornpm
:
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:
Then you can add an Awesomplete widget by adding the following input tag:
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:
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.
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 file for details.
Links
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.