Download
Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers. Because <datalist> still doesn’t cut it. Note that by default you need to type at least 2 characters for the popup to show up, though that’s super easy to customize. For the autocomplete, you just need an <input> text field (might work on <textarea> and elements with contentEditable, but that hasn’t been tested). 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. Suggestions with different label and value are supported too. The label will be shown in autocompleter and the value will be inserted into the input. If you want to insert the label into the input you can provide your own replace function.
Features
- Combine both HTML attributes and JS properties
- Use the JS properties to change a parameter after the object has been created
- Custom events are thrown in several places and are often cancellable
- To avoid conflicts, all custom events are prefixed with awesomplete-
- There are several methods on every Awesomplete instance that you can call to customize behavior
- Link an input to a list of suggestions
Project Samples
