Tutorial: Autocomplete

Autocomplete

Autocomplete lazy mode

This example shows the usage of the Autocomplete feature in the default lazy mode. In this mode, user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions.

In this mode, the mouse and keyboard bindings are identical as in Handsontable cell type. The options are rendered from the source property which can be an array, or a function that returns an array.

Autocomplete strict mode

This is the same example as above with a difference that autocomplete now runs in strict mode. In this mode, the autocomplete cells will only accept values that are defined in the source array. The mouse and keyboard bindings are identical as in Handsontable cell type with the below differences:

  • If there is at least one option visible, there always is a selection in HOT-in-HOT.
  • When the first row is selected, pressing ARROW UP does not deselect HOT-in-HOT. Instead behaves as the ENTER key but moves the selection in the main HOT upwards.

In strict mode, the allowInvalid option determines the behaviour in case of manual user input:

  • allowInvalid: true (optional) - allows manual input of value that does not exist in the source. In this case, the field background highlight becomes red and the selection advances to the next cell
  • allowInvalid: false - does not allow manual input of value that does not exist in the source. In this case, the ENTER key is ignored and the editor field remains opened.

Autocomplete strict mode (Ajax)

Autocomplete can be also used with Ajax data source. In the below example, suggestions for the "Car" column are loaded from server. To load data from remote (asynchronous) source, assign a function to the 'source' property. Function should perform the server side request and call the callback function when the result is available.

Help us improve this page