Поиск
Легко создать прекрасно выглядящие поиска.
Использование
Компонент поиска состоит из поисковой формы и само поле для поиска.
Класс | Описание |
---|---|
.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 */ });