Help Center

Menu

Typeahead events (auto-completion)

Description

Allows to apply events triggered on the input element during the life-cycle of a Typeahead:

  • active - Fired when the typeahead moves to active state.

  • idle - Fired when the typeahead moves to idle state.

  • open - Fired when the results container is opened.

  • close - Fired when the results container is closed.

  • change - Normalized version of the native change event. Fired when input loses focus and the value has changed since it originally received focus.

  • render - Fired when suggestions are rendered for a dataset. The event handler will be invoked with 4 arguments: the jQuery event object, the suggestions that were rendered, a flag indicating whether the suggestions were fetched asynchronously, and the name of the dataset the rendering occurred in.

  • select - Fired when a suggestion is selected. The event handler will be invoked with 2 arguments: the jQuery event object and the suggestion object that was selected.

  • autocomplete - Fired when a autocompletion occurs. The event handler will be invoked with 2 arguments: the jQuery event object and the suggestion object that was used for autocompletion.

  • cursorchange - Fired when the results container cursor moves. The event handler will be invoked with 2 arguments: the jQuery event object and the suggestion object that was moved to.

  • asyncrequest - Fired when an async request for suggestions is sent. The event handler will be invoked with 3 arguments: the jQuery event object, the current query, and the name of the dataset the async request belongs to.

  • asynccancel - Fired when an async request is cancelled. The event handler will be invoked with 3 arguments: the jQuery event object, the current query, and the name of the dataset the async request belonged to.

  • asyncreceive - Fired when an async request completes. The event handler will be invoked with 3 arguments: the jQuery event object, the current query, and the name of the dataset the async request belongs to.

Source: https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#custom-events

Default value

typeahead: {
    events: {
        select: function(event, suggestion) {
            _selectItem(suggestion, $(event.target));
        }
    }
}

Examples

typeahead: {
    events: {
        render: function(event, suggestions, syncType, name) {
            ...
        }
    }
}

See also