# Autocomplete

Use Bootstrap's JavaScript autocomplete plugin to view autocomplete suggestion while user typing.

This plugin use dropdown plugin to be able to work properly, make sure you include it in your custom build. For the ajax request, we're using jQuery ajax build-in function. You should not use the slim version of the jQuery.

## Examples

### List Source

List of autocomplete suggestion can be taken from `datalist` element ase below:

Timezone Asia/Aden Asia/Aqtau Asia/Baghdad Asia/Barnaul Asia/Chita Asia/Dhaka Asia/Famagusta Asia/Hong_Kong Asia/Jayapura Asia/Kuala_Lumpur Asia/Jakarta

### Ajax Prefect

The suggestions text can also be prefect during initialize time. This method will call ajax request once in the render time. This method is better if suggestions text is not too many

Timezone

### Ajax Source

Suggestion text taken during user typing. This method is good for datalist that is too much for single request.

Timezone

### Ajax Source ( With Relation )

Add additional query string to ajax request during user typing by adding option `filterRelation`

Continent
Timezone

### On Render Item

Right after a suggestion item element already rendered and is already on view, event `itemrender.bs.autocomplete` will be called that get two parameters, element, and rendered item.

Timezone

### Pick Item

Right after user pick an option, event `pick.bs.autocomplete` will be called that get two parameters, element, and picked element.

Timezone

## Usage

### Via JavaScript

$('#input-url').autocomplete(options)

### Server

Unless you provide `preProcess` options, the server should response with ajax as below:.

[ "Asia/Jakarta", "Asia/Hongkong" ]

### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-filter=""`.

Name | Type | Default | Description
--- | --- | --- | ---
list | string | null | The id of datalist element to take the option from.
prefetch | string | null | Target URL to fetch for all enable option on the first init.
filter | string | null | Target URL to fetch the filtered result, the string `#QUERY#` will be replaced with user input.
filterDelay | int | 300 | Total microsecond to wait since last user input before triggering ajax request.
filterMinChars | int | 1 | Total character user input to trigger ajax request.
filterRelation | object | null | Related element to add on request query in form of `key => selector`. For example: `{what: "#input-continent"}`.
maxResult | int | 10 | Total result to show on dropdown list.
onPick | function | null | Function to call after user picking the dropdown item. `onPick(input, item)`
onItemRendered | function | null | Function to call right after item element rendered. `onItemRendered(input, item)`.
preProcess | function | null | Process the ajax response to suit the response spec.

### Events

Bootstrap autocomplete exposes a few events for hooking into suggestion functionality. All sugggestions events are fired at the input element itself.

Event Type | Description
--- | ---
pick.bs.autocomplete | This event fires immediately when user selecting any of suggestions option item.
itemrender.bs.autocomplete | An event that called right after suggestion item already rendered and is on view.

$('#input-url').on('pick.bs.autocomplete', function(el, item){ // ... }) $('#input-url').on('itemrender.bs.autocomplete', function(el, item){ // ... })