Autocomplete

Create inputs that allow users to choose from a list of pre-generated values while typing.

Usage

To apply this component, add the .f-autocomplete class to a <div> element around an input element. To enable the necessary JavaScript for the autocomplete input, you also need to add the data-f-autocomplete attribute. Add {source:'PATH/TO/RESULTS'} to the data attribute and set the path to your autocomplete list, which needs to be formatted in JSON (Example). A dropdown from the Dropdown component is injected to display autocomplete suggestions. You can even navigate through the dropdown with the up and down keys of your keyboard.

Example

Note Type in Hamburg, New York, Moscow or Amsterdam.

Markup

<div class="f-autocomplete f-form" data-f-autocomplete="{source:'my-autocomplete.json'}">
	<input type="text">
</div>

Custom templates

You can also create custom templates to display the results differently.

Example

Markup

<div class="f-autocomplete f-form" data-f-autocomplete="{source:'my-autocomplete.json'}">
	<input type="text">
	<script type="text/autocomplete">
		<ul class="f-nav f-nav-autocomplete f-autocomplete-results">
			{{~items}}
			<li data-value="{{ $item.value }}">
				<a>
					{{ $item.title }}
					<div>{{{ $item.text }}}</div>
				</a>
			</li>
			{{/items}}
		</ul>
	</script>
</div>

JavaScript options

Option Possible value Default Description
minLength integer 3 Min. input length before triggering autocomplete
searchParam string search string parameter included in QUery when sending ajax request
params object search params included in Query when sending ajax request
method string post method for ajax request
delay integer 300 Delay time after stop typing
loadingClass string f-loading class added to f-autocomplete container when loading results
flipDropdown boolean false results dropdown appears in the opposite direction (up rather than down)
skipClass string f-skip ?
hoverClass string f-active class applied when hovering over an autocomplete item
source function, object, string null Data source
renderer ? ? ?
template string <ul class="f-nav f-nav-autocomplete f-autocomplete-results">
{{~items}}
<li data-value="{{$item.value}}"><a>{{$item.value}}</a></li>
{{/items}}</ul>
markup template for the autocomplete results

Init element manually

var autocomplete = FatKit.autocomplete(element, { /* options */ });

Events

Name Parameter Description
selectitem.f.autocomplete event, data, acobject On item selected
show.f.autocomplete event On autocomplete dropdown show