Автозаполнение

Создание входов, которые позволяют пользователю выбрать из списка заранее сгенерированных значений при вводе.

Использование

Для установки этого компонента, добавить .uk-autocomplete класс <div> элемент вокруг input элемент. Чтобы включить необходимые JavaScript Для автозавершения ввода, необходимо также добавить data-uk-autocomplete атрибут. Добавить {source:'PATH/TO/RESULTS'} в атрибут Data и прописать путь в свой список автозаполнения, который должен быть отформатирован в формате json (Пример). Выпадающий из Выпадающий компонент вводится дисплей автозаполнения предложения. Вы можете даже перемещаться через выпадающее меню вверх и вниз клавиши вашей клавиатуры.

Пример

Примечание наберите в Гамбурге, Нью-Йорке, Москве или Амстердаме.

Разметки

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

Пользовательские шаблоны

Вы также можете создать собственные шаблоны для отображения результатов по-разному.

Пример

Разметки

<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 варианты

Инициализации элементов вручную

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

События