Autocomplete

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

Применение

Чтобы применить компонент 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

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

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

События

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>