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"> |
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 |