This page shows how to configure Handsontable with Autocomplete cell type, which expands the Handsontable cell type. with features typical for a combo box that updates its options based on user input.
There are three demos on this page:
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.
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.
In this mode, the mouse and keyboard bindings are identical as in Handsontable cell type with the below differences:
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 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.