Collect user input with a list of choices, by using the autocomplete cell type.
Autocomplete can be configured in three different ways:
- Flexible mode
- Strict mode
- Strict mode using Ajax
Autocomplete flexible mode
This example uses the
autocomplete feature in the default flexible mode. In this mode, the user can choose one of the suggested options while typing or enter a custom value that is not included in the suggestions.
Autocomplete strict mode
This is the same example as above, the difference being 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 to the
Handsontable cell type but with the differences below:
- 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, it behaves as the Enter key but moves the selection in the main HOT upwards
In strict mode, the allowInvalid option determines the behaviour in the case of manual user input:
allowInvalid: trueoptional - allows manual input of a value that does not exist in the
source, the field background is highlighted in red, and the selection advances to the next cell
allowInvalid: false- does not allow manual input of a value that does not exist in the
source, the Enter key is ignored, and the editor field remains open
Autocomplete strict mode (Ajax)
Autocomplete can also be used with Ajax data sources. In the example below, suggestions for the "Car" column are loaded from the server. To load data from a remote asynchronous source, assign a function to the 'source' property. The function should perform the server-side request and call the callback function when the result is available.
Related API reference
- Configuration options:
- Core methods: