# 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 */ });

### Events

Same as the Autocomplete component.