Input suggestion

The .input-suggestion is a simple and flexible autocomplete component. You can use simple text or custom template for display the list of items. For create the list of items you may use the class .list-group (refer to bootstrap documentation for details).

Operation mode

The component has two modes of operation: static and async.

Operation modes

Mode

Description

static

Default mode. Used for static items and has a built-in DOM search for items in the list.

async

Used for dynamic items that requires DOM manipulation. This mode disable the built-in DOM search. It is setted by the attribute data-async.

Utility classes

There are some utility classes that can be combined with .list-group to automate the component behavior.

Utility classes

Class

Description

list-group empty

It will be automatically toggled if the list has or does not have items to display.

list-group loading

Only for async mode. Displayed when the user start to typing and hidden when invoke the method suggestion('refresh').

list-group items

Indicates the .list-group that contains the selectable items.

Methods

One method is available to control the input suggestion.

Methods

Method

Description

suggestion('refresh')

Only for async mode. Should be triggered after DOM manipulation.

Events

Events can be used by developer to interact with the component and write custom logic.

Events

Event

Description

suggestion:change

Triggered when the user select a item in the list.

suggestion:hide

Triggered when the user select a item in the list or the input loses the focus.

suggestion:search

Triggered when the user end to typing.

suggestion:show

Triggered when the user start to typing.

Examples

Follow to the next topcis for details and examples how to create the component using simple text, custom template and asynchronous items.

Simple text

This is the most basic way to create the component. The suggestions are displayed whenever the user start to typing in the input element, that is, when the input event is triggered. See the example below:

Custom template

You do not need to restrict yourself by using only simple text for the items of the list. You can customize like you wish.

To the component work properly you need to define what element contains the text that will be displayed in the input when a item of the list is selected. You can do this by setting the attribute option data-text with the desired element selector. See the example below:

Asynchronous

You can use simple text or custom template for async items, however the built-in DOM search is disabled.

When the user end to typing the event suggestion:search will be triggered. You will need to listen to this event to write your search logic, manipulate the DOM and then invoke the method suggestion('refresh'). See the example below: