Autocomplete

Create inputs that allow users to choose from a list of pre-generated values while typing.

Usage

To apply this component, add the .uk-autocomplete class to a <div> element around an input element. To enable the necessary JavaScript for the autocomplete input, you also need to add the data-uk-autocomplete attribute. Add {source:'PATH/TO/RESULTS'} to the data attribute and set the path to your autocomplete list, which needs to be formatted in JSON (Example). A dropdown from the Dropdown component is injected to display autocomplete suggestions. You can even navigate through the dropdown with the up and down keys of your keyboard.

Example

Note Type in Hamburg, New York, Moscow or Amsterdam.

Markup

<div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}">
    <input type="text">
</div>

Custom templates

You can also create custom templates to display the results differently.

Example

Markup

<div class="uk-autocomplete uk-form" data-uk-autocomplete="{source:'my-autocomplete.json'}">
    <input type="text">
    <script type="text/autocomplete">
        <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">
            {{~items}}
            <li data-value="{{ $item.value }}">
                <a>
                    {{ $item.title }}
                    <div>{{{ $item.text }}}</div>
                </a>
            </li>
            {{/items}}
        </ul>
    </script>
</div>

JavaScript options

Init element manually

var autocomplete = UIkit.autocomplete(element, { /* options */ });

Events