# 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