Search

Easily create a nicely looking search.

Usage

The Search component consists of a search form and the search field itself.

Class Description
.f-search Add this class to a <form> element to define the Search component.
.f-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-f-search attribute.

Example

Markup

<form class="f-search" data-f-search>
	<input class="f-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="f-search" data-f-search="{source:'my-results.json'}">

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

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

</form>

Search in navbars

A search can be used inside a Navbar from the Navbar component.

Example

Markup

<nav class="f-navbar">
	<div class="f-navbar-flip">
		<div class="f-navbar-content">
			<form class="f-search" data-f-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="f-btn" data-f-offcanvas="{target:'#my-id'}">...</button>

<!-- This is the off-canvas sidebar -->
<div id="my-id" class="f-offcanvas">
	<div class="f-offcanvas-bar">
		<form class="f-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

let search = FatKit.search(element, { /* options */ });

Events

Same as the Autocomplete component.