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

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){
                                    // ...
                                })
                            