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 some differences. In strict mode, the allowInvalid
option determines the behaviour in case of manual user input.
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.
Password cell type
The following examples show how to configure Handsontable with password
cell type. This kind of cell behaves like a text cell with a difference that it masks its value using asterisk in cell renderer. For the cell editor, a <input type="password">
field is used. Data is stored in the data source as plain text. Additionally you can specify hash length and custom hash symbols.
Fixed hash length
The following examples show how to configure Handsontable with password
cell type with limited hash length. By default every hash has length equal to the length of value that it corresponds with. Use option hashLength
added to column configuration to set fixed hash length. Here hash length is set to 8
, so if password is longer, other symbols are hidden.
Custom hash symbol
The following examples show how to configure Handsontable with password
cell type with custom hash symbol. By default every hash consists of asterisks *
. Use option hashSymbol
to set custom hash symbol. You can use any character, entity or event HTML. Note that you can't change symbol used by the input field due to browsers limitations.