Autocomplete

The autocomplete component predicts the value when the user starts to type in a field. A list is shown with suggestions in order to fill in the field.

This component requires Awesomplete.

---

Live Example

---

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="autocomplete.css">

Link to the dependency (Awesomplete). Note that this file is also available under dist/js/components.

<script src="awesomplete.js"></script>

Link to the JS file if you loaded phonon-core.js only:

<script src="autocomplete.js"></script>

Markup

<input type="text" placeholder="Search" id="example-input">

<datalist id="my-list">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
</datalist>

JavaScript

Create the instance of Awesomplete:

var awesomplete = phonon.autocomplete(document.querySelector('#example-input'), {list: '#my-list'});

You can then use the Awesomplete's API.

---