Поиск

С легкостью создаем красивый поиск.

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

Компонент «Search» состоит из формы поиска и самого поля поиска.

Класс Описание
.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:'ПУТЬ/К/РЕЗУЛЬТАТАМ'} в data-* атрибут и укажите путь к результатам поиска, которые необходимо отформатировать в формате JSON (Пример).

Вы можете использовать раскрывающийся список из компонента Dropdown для отображения результатов поиска. Раскрывающийся список из компонента Dropdown вводится для отображения результатов поиска. Вы можете даже перемещаться по выпадающему списку клавишами клавиатуры вверх и вниз.

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

Пример

Разметка

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

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

    <!-- Это выпадающий список Dropdown, который вводится через JavaScript -->
    <div class="uk-dropdown uk-dropdown-search">
        <ul class="uk-nav uk-nav-search">...</ul>
    </div>

</form>

Search и Navbar

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

Пример

Разметка

<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'}">
                <input class="uk-search-field" type="search" placeholder="Найти...">
            </form>
        </div>
    </div>
</nav>

Search и Off-canvas

Поиск также может быть размещен внутри панели Off-canvas.

Пример

Разметка

<!-- Это кнопка переключения боковой панели off-canvas -->
<button class="uk-button" data-uk-offcanvas="{target:'#my-id'}">...</button>

<!-- Это off-canvas sidebar -->
<div id="my-id" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <form class="uk-search">
            <input class="uk-search-field" type="search" placeholder="Найти...">
        </form>
    </div>
</div>

Параметры JavaScript

Опция Значение По умолчанию Описание
source string '' Data source url
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

Запуск элемента вручную

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

События

То же самое, что и в компоненте Autocomplete.