Поиск

Легко создать прекрасно выглядящие поиска.

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

Компонент поиска состоит из поисковой формы и само поле для поиска.

Класс Описание
.uk-search Добавьте этот класс к <form> элемент для определения компонента поиска.
.uk-search-field Добавить этот класс в сообщение <input> элемент для создания поисковое поле.

Чтобы включить необходимые JavaScript для поиска, просто добавьте data-uk-search атрибут.

Пример

Разметки

<form class="uk-search" data-uk-search>
    <input class="uk-search-field" type="search" placeholder="">
</form>

Результаты поиска в формате json

Просто добавить {source:'PATH/TO/RESULTS'} в атрибут Data и указать путь для поиска результатов, которые должны быть отформатированы в формате json (Пример). Вы можете использовать выпадающий из Выпадающий компонент, чтобы отобразить результаты поиска. Выпадающий из Выпадающий компонент вводится для отображения результатов поиска. Вы можете даже перемещаться через выпадающее меню вверх и вниз клавиши вашей клавиатуры.

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

Пример

Разметки

<form class="uk-search" data-uk-search="{source:'my-results.json'}">

    <input class="uk-search-field" type="search" placeholder="">

    <!-- This is the dropdown, which is injected through JavaScript -->
    <div class="uk-dropdown uk-dropdown-search">
        <ul class="uk-nav uk-nav-search">...</ul>
    </div>

</form>

Поиск в navbars

Поиск может быть использован внутри навигации от Компонент навигации.

Пример

Разметки

<nav class="uk-navbar">
    <div class="uk-navbar-flip">
        <div class="uk-navbar-content">
            <form class="uk-search" data-uk-search="{source:'my-results.json'}">
            ...
            </form>
        </div>
    </div>
</nav>

Поиск в off-холст

Поиск может также быть помещен за пределами холста, бар.

Пример

Разметки

<!-- This is the button toggling the off-canvas sidebar -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <form class="uk-search">
        ...
        </form>
    </div>
</div>

JavaScript варианты

Вариант Возможное значение По умолчанию Описание
source string '' URL-адрес источника данных
minLength integer 3 Мин. длина ввода до срабатывания автозаполнения
param string search Наименование запроса при отправке AJAX-запроса
delay integer 300 Время задержки после остановки ввода

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

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

События

Same as the Компонент автозаполнения
.