Skip to content
Handsontable dev

Autocomplete cell type

Collect user input with a list of choices, by using the autocomplete cell type.

The autocomplete cell type provides a text input with suggestions from a predefined list. Use it when users should choose from known values but can also type freely.

Overview

You can edit the autocomplete-typed cells in three different ways:

  • Flexible mode
  • Strict mode
  • Strict mode using Ajax

In all three modes, the source option can be provided in two formats:

  • An array of values
  • An array of objects with key and value properties

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: true optional - 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.

The source option

The source option can be provided in two formats:

Array of values

You can provide the source option as an array of values that will be used as the autocomplete suggestions.

Array of objects

You can provide the source option as an array of objects with key and value properties. The value property will be used as the autocomplete suggestion, while the entire object will be used as the value of the cell.

API methods

When working with object-based autocomplete data, you can use methods like getSourceData(), getSourceDataAtCell(), getSourceDataAtRow() etc., to get the data in its original object format with both key and value properties. The getData() method will return only the value property’s value.

The filter option

By default, the autocomplete dropdown hides options that don’t match what the user is typing. Set filter: false to always show the full list of source options, regardless of the current input. This is useful when you want to give users a visual reference of all available choices while they type.

The left column uses the default behavior (filter: true) — options are narrowed as you type. The right column has filter: false — all options remain visible no matter what you enter.

The filteringCaseSensitive option

By default, the autocomplete search is case-insensitive — typing "bl" matches both "Black" and "blue". Set filteringCaseSensitive: true to require an exact case match when filtering suggestions.

The left column uses the default case-insensitive behavior. The right column has filteringCaseSensitive: true — only options whose case matches the typed characters are shown.

Result

After configuring the autocomplete cell type, cells display a text input that shows matching suggestions as the user types. In strict mode, only values from the source list are accepted. In flexible mode, users can also enter custom values not in the list.

Related guides

Cell type
Dropdown cell type
Select cell type

Configuration options

allowHtml
filter
filteringCaseSensitive
sortByRelevance
source
strict
trimDropdown
type
visibleRows

Core methods

getCellMeta()
getCellMetaAtRow()
getCellsMeta()
getDataType()
setCellMeta()
setCellMetaObject()
removeCellMeta()

Hooks

afterGetCellMeta
afterSetCellMeta
beforeGetCellMeta
beforeSetCellMeta