Autocomplete

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

Применение

Чтобы применить компонент Autocomplete, добавьте класс .uk-autocomplete к элементу <div> вокруг элемента input. Чтобы включить необходимый JavaScript для автозаполнения поля ввода *input, вам также необходимо добавить атрибут data-uk-autocomplete. Добавьте к data-* атрибуту {source:'ПУТЬ/К/РЕЗУЛЬТАТАМ'} и укажите путь к списку автозаполнения, который необходимо отформатировать в формате JSON (Пример). В раскрывающемся списке компонента Dropdown отображаются предложения автозаполнения. Вы можете перемещаться по выпадающему списку меню клавишами клавиатуры вверх и вниз.

Пример

Примечание В образце: Дурбан, Нью-Йорк, Москва и Львов.

Разметка

<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 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

Добавляем компонент «Autocomplete» к проекту

<link rel="stylesheet" href="/../css/components/autocomplete.min.css">
<script src="/../js/components/autocomplete.min.js"></script>