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

Option Possible value Default Description
source url, array, callback function [] Data source
minLength integer 3 Min. input length before triggering autocomplete
param string search Query name when sending ajax request
delay integer 300 Delay time after stop typing
flipDropdown boolean false Flip result dropdown

Init element manually

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

Events

Name Parameter Description
selectitem.uk.autocomplete event, data, acobject On item selected
show.uk.autocomplete event On autocomplete dropdown show