Search
Easily create a nicely looking search.
Usage
The Search component consists of a search form and the search field itself.
| Class | Description |
|---|---|
.uk-search |
Add this class to a <form> element to define the Search component. |
.uk-search-field |
Add this class to an <input> element to create the search field. |
To enable the necessary JavaScript for the search, just add the data-uk-search attribute.
Example
Markup
<form class="uk-search" data-uk-search>
<input class="uk-search-field" type="search" placeholder="">
</form>JSON search results
Just add {source:'PATH/TO/RESULTS'} to the data attribute and set the path to your search results, which need to be formatted in JSON (Example). You can use a dropdown from the Dropdown component to display search results. A dropdown from the Dropdown component is injected to display the search results. You can even navigate through the dropdown with the up and down keys of your keyboard.
IMPORTANT The search requires the autocomplete component to work. Please make sure that you include them always together.
Example
Markup
<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>Search in navbars
A search can be used inside a Navbar from the Navbar component.
Example
Markup
<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>Search in off-canvas
A search can also be placed inside the off-canvas bar.
Example
Markup
<!-- 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 options
| Option | Possible value | Default | Description |
|---|---|---|---|
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 |
Init element manually
var search = UIkit.search(element, { /* options */ });