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 with asynchronous data

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.

The visibleRows option sets how many suggestions the dropdown shows without scrolling. The default is 10 rows. The Chassis color column sets visibleRows: 4, so the dropdown shows only four suggestions at a time and scrolls to reveal the rest.

The trimDropdown option controls the dropdown’s width. By default (trimDropdown: true), the dropdown matches the width of the edited cell, which can truncate long suggestions. The Bumper color column sets trimDropdown: false, so the dropdown expands to fit its widest suggestion, even if that makes it wider than the cell.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const colors = [
9
    'yellow',
10
    'red',
11
    'orange and another color',
12
    'green',
13
    'blue',
14
    'gray',
15
    'black',
16
    'white',
17
    'purple',
18
    'lime',
19
    'olive',
20
    'cyan',
21
  ];
22

23
  return (
24
    <HotTable
25
      height="auto"
26
      autoWrapRow={true}
27
      autoWrapCol={true}
28
      licenseKey="non-commercial-and-evaluation"
29
      data={[
30
        ['BMW', 2017, 'black', 'black'],
31
        ['Nissan', 2018, 'blue', 'blue'],
32
        ['Chrysler', 2019, 'yellow', 'black'],
33
        ['Volvo', 2020, 'white', 'gray'],
34
      ]}
35
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
36
      columns={[
37
        {
38
          type: 'autocomplete',
39
          source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
40
          strict: false,
41
        },
42
        { type: 'numeric' },
43
        {
44
          type: 'autocomplete',
45
          source: colors,
46
          strict: false,
47
          visibleRows: 4,
48
        },
49
        {
50
          type: 'autocomplete',
51
          source: colors,
52
          strict: false,
53
          trimDropdown: false,
54
        },
55
      ]}
56
    />
57
  );
58
};
59

60
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const colors = [
9
    'yellow',
10
    'red',
11
    'orange and another color',
12
    'green',
13
    'blue',
14
    'gray',
15
    'black',
16
    'white',
17
    'purple',
18
    'lime',
19
    'olive',
20
    'cyan',
21
  ];
22

23
  return (
24
    <HotTable
25
      height="auto"
26
      autoWrapRow={true}
27
      autoWrapCol={true}
28
      licenseKey="non-commercial-and-evaluation"
29
      data={[
30
        ['BMW', 2017, 'black', 'black'],
31
        ['Nissan', 2018, 'blue', 'blue'],
32
        ['Chrysler', 2019, 'yellow', 'black'],
33
        ['Volvo', 2020, 'white', 'gray'],
34
      ]}
35
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
36
      columns={[
37
        {
38
          type: 'autocomplete',
39
          source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
40
          strict: false,
41
        },
42
        { type: 'numeric' },
43
        {
44
          type: 'autocomplete',
45
          source: colors,
46
          strict: false,
47
          visibleRows: 4,
48
        },
49
        {
50
          type: 'autocomplete',
51
          source: colors,
52
          strict: false,
53
          trimDropdown: false,
54
        },
55
      ]}
56
    />
57
  );
58
};
59

60
export default ExampleComponent;

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

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const colors = [
9
    'yellow',
10
    'red',
11
    'orange',
12
    'green',
13
    'blue',
14
    'gray',
15
    'black',
16
    'white',
17
    'purple',
18
    'lime',
19
    'olive',
20
    'cyan',
21
  ];
22

23
  const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];
24

25
  return (
26
    <HotTable
27
      height="auto"
28
      autoWrapRow={true}
29
      autoWrapCol={true}
30
      licenseKey="non-commercial-and-evaluation"
31
      data={[
32
        ['BMW', 2017, 'black', 'black'],
33
        ['Nissan', 2018, 'blue', 'blue'],
34
        ['Chrysler', 2019, 'yellow', 'black'],
35
        ['Volvo', 2020, 'white', 'gray'],
36
      ]}
37
      colHeaders={['Car<br>(allowInvalid true)', 'Year', 'Chassis color', 'Bumper color<br>(allowInvalid true)']}
38
      columns={[
39
        {
40
          type: 'autocomplete',
41
          source: cars,
42
          strict: true,
43
          // allowInvalid: true // true is default
44
        },
45
        {},
46
        {
47
          type: 'autocomplete',
48
          source: colors,
49
          strict: true,
50
        },
51
        {
52
          type: 'autocomplete',
53
          source: colors,
54
          strict: true,
55
          allowInvalid: true, // true is default
56
        },
57
      ]}
58
    />
59
  );
60
};
61

62
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const colors = [
9
    'yellow',
10
    'red',
11
    'orange',
12
    'green',
13
    'blue',
14
    'gray',
15
    'black',
16
    'white',
17
    'purple',
18
    'lime',
19
    'olive',
20
    'cyan',
21
  ];
22

23
  const cars = ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'];
24

25
  return (
26
    <HotTable
27
      height="auto"
28
      autoWrapRow={true}
29
      autoWrapCol={true}
30
      licenseKey="non-commercial-and-evaluation"
31
      data={[
32
        ['BMW', 2017, 'black', 'black'],
33
        ['Nissan', 2018, 'blue', 'blue'],
34
        ['Chrysler', 2019, 'yellow', 'black'],
35
        ['Volvo', 2020, 'white', 'gray'],
36
      ]}
37
      colHeaders={['Car<br>(allowInvalid true)', 'Year', 'Chassis color', 'Bumper color<br>(allowInvalid true)']}
38
      columns={[
39
        {
40
          type: 'autocomplete',
41
          source: cars,
42
          strict: true,
43
          // allowInvalid: true // true is default
44
        },
45
        {},
46
        {
47
          type: 'autocomplete',
48
          source: colors,
49
          strict: true,
50
        },
51
        {
52
          type: 'autocomplete',
53
          source: colors,
54
          strict: true,
55
          allowInvalid: true, // true is default
56
        },
57
      ]}
58
    />
59
  );
60
};
61

62
export default ExampleComponent;

Autocomplete strict mode with asynchronous data

Autocomplete can also use asynchronous data sources. In the example below, suggestions for the “Car” column are loaded from the server with the Fetch API. To load data from a remote source, assign a function to the source option. The function receives the query string and the process callback. Call process() with the result array when the request completes.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      height="auto"
11
      autoWrapRow={true}
12
      autoWrapCol={true}
13
      licenseKey="non-commercial-and-evaluation"
14
      data={[
15
        ['BMW', 2017, 'black', 'black'],
16
        ['Nissan', 2018, 'blue', 'blue'],
17
        ['Chrysler', 2019, 'yellow', 'black'],
18
        ['Volvo', 2020, 'white', 'gray'],
19
      ]}
20
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
21
      columns={[
22
        {
23
          type: 'autocomplete',
24
          source(_query, process) {
25
            fetch('/docs/scripts/json/autocomplete.json')
26
              .then((response) => response.json())
27
              .then((response) => process(response.data));
28
          },
29
          strict: true,
30
        },
31
        {},
32
        {},
33
        {}, // Bumper color is a default text column
34
      ]}
35
    />
36
  );
37
};
38

39
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  return (
9
    <HotTable
10
      height="auto"
11
      autoWrapRow={true}
12
      autoWrapCol={true}
13
      licenseKey="non-commercial-and-evaluation"
14
      data={[
15
        ['BMW', 2017, 'black', 'black'],
16
        ['Nissan', 2018, 'blue', 'blue'],
17
        ['Chrysler', 2019, 'yellow', 'black'],
18
        ['Volvo', 2020, 'white', 'gray'],
19
      ]}
20
      colHeaders={['Car', 'Year', 'Chassis color', 'Bumper color']}
21
      columns={[
22
        {
23
          type: 'autocomplete',
24
          source(_query, process) {
25
            fetch('/docs/scripts/json/autocomplete.json')
26
              .then((response) => response.json())
27
              .then((response) => process(response.data));
28
          },
29
          strict: true,
30
        },
31
        {}, // Year is a default text column
32
        {}, // Chassis color is a default text column
33
        {}, // Bumper color is a default text column
34
      ]}
35
    />
36
  );
37
};
38

39
export default ExampleComponent;

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.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const shipmentKVData = [
9
    ['Electronics and Gadgets', 'Los Angeles International Airport'],
10
    ['Medical Supplies', 'John F. Kennedy International Airport'],
11
    ['Auto Parts', "Chicago O'Hare International Airport"],
12
    ['Fresh Produce', 'London Heathrow Airport'],
13
    ['Textiles', 'Charles de Gaulle Airport'],
14
    ['Industrial Equipment', 'Dubai International Airport'],
15
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
16
    ['Consumer Goods', 'Beijing Capital International Airport'],
17
    ['Machine Parts', 'Singapore Changi Airport'],
18
    ['Food Products', 'Amsterdam Airport Schiphol'],
19
  ];
20

21
  const airportKVData = [
22
    'Los Angeles International Airport',
23
    'John F. Kennedy International Airport',
24
    "Chicago O'Hare International Airport",
25
    'London Heathrow Airport',
26
    'Charles de Gaulle Airport',
27
    'Dubai International Airport',
28
    'Tokyo Haneda Airport',
29
    'Beijing Capital International Airport',
30
    'Singapore Changi Airport',
31
    'Amsterdam Airport Schiphol',
32
    'Frankfurt Airport',
33
    'Seoul Incheon International Airport',
34
    'Toronto Pearson International Airport',
35
    'Madrid-Barajas Airport',
36
    'Bangkok Suvarnabhumi Airport',
37
    'Munich International Airport',
38
    'Sydney Kingsford Smith Airport',
39
    'Barcelona-El Prat Airport',
40
    'Kuala Lumpur International Airport',
41
    'Zurich Airport',
42
  ];
43

44
  return (
45
    <HotTable
46
      height="auto"
47
      autoWrapRow={true}
48
      autoWrapCol={true}
49
      licenseKey="non-commercial-and-evaluation"
50
      data={shipmentKVData}
51
      columns={[
52
        {
53
          title: 'Shipment',
54
        },
55
        {
56
          type: 'autocomplete',
57
          source: airportKVData,
58
          title: 'Airport',
59
        },
60
      ]}
61
    />
62
  );
63
};
64

65
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const shipmentKVData = [
9
    ['Electronics and Gadgets', 'Los Angeles International Airport'],
10
    ['Medical Supplies', 'John F. Kennedy International Airport'],
11
    ['Auto Parts', "Chicago O'Hare International Airport"],
12
    ['Fresh Produce', 'London Heathrow Airport'],
13
    ['Textiles', 'Charles de Gaulle Airport'],
14
    ['Industrial Equipment', 'Dubai International Airport'],
15
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
16
    ['Consumer Goods', 'Beijing Capital International Airport'],
17
    ['Machine Parts', 'Singapore Changi Airport'],
18
    ['Food Products', 'Amsterdam Airport Schiphol'],
19
  ];
20

21
  const airportKVData = [
22
    'Los Angeles International Airport',
23
    'John F. Kennedy International Airport',
24
    "Chicago O'Hare International Airport",
25
    'London Heathrow Airport',
26
    'Charles de Gaulle Airport',
27
    'Dubai International Airport',
28
    'Tokyo Haneda Airport',
29
    'Beijing Capital International Airport',
30
    'Singapore Changi Airport',
31
    'Amsterdam Airport Schiphol',
32
    'Frankfurt Airport',
33
    'Seoul Incheon International Airport',
34
    'Toronto Pearson International Airport',
35
    'Madrid-Barajas Airport',
36
    'Bangkok Suvarnabhumi Airport',
37
    'Munich International Airport',
38
    'Sydney Kingsford Smith Airport',
39
    'Barcelona-El Prat Airport',
40
    'Kuala Lumpur International Airport',
41
    'Zurich Airport',
42
  ];
43

44
  return (
45
    <HotTable
46
      height="auto"
47
      autoWrapRow={true}
48
      autoWrapCol={true}
49
      licenseKey="non-commercial-and-evaluation"
50
      data={shipmentKVData}
51
      columns={[
52
        {
53
          title: 'Shipment',
54
        },
55
        {
56
          type: 'autocomplete',
57
          source: airportKVData,
58
          title: 'Airport',
59
        },
60
      ]}
61
    />
62
  );
63
};
64

65
export default ExampleComponent;

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.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const shipmentKVData = [
9
    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],
10
    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],
11
    ['Auto Parts', { key: 'ORD', value: "Chicago O'Hare International Airport" }],
12
    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],
13
    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],
14
    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],
15
    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],
16
    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],
17
    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],
18
    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],
19
  ];
20

21
  const airportKVData = [
22
    { key: 'LAX', value: 'Los Angeles International Airport' },
23
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
24
    { key: 'ORD', value: "Chicago O'Hare International Airport" },
25
    { key: 'LHR', value: 'London Heathrow Airport' },
26
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
27
    { key: 'DXB', value: 'Dubai International Airport' },
28
    { key: 'HND', value: 'Tokyo Haneda Airport' },
29
    { key: 'PEK', value: 'Beijing Capital International Airport' },
30
    { key: 'SIN', value: 'Singapore Changi Airport' },
31
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
32
    { key: 'FRA', value: 'Frankfurt Airport' },
33
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
34
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
35
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
36
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
37
    { key: 'MUC', value: 'Munich International Airport' },
38
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
39
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
40
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
41
    { key: 'ZRH', value: 'Zurich Airport' },
42
  ];
43

44
  return (
45
    <HotTable
46
      height="auto"
47
      autoWrapRow={true}
48
      autoWrapCol={true}
49
      licenseKey="non-commercial-and-evaluation"
50
      data={shipmentKVData}
51
      columns={[
52
        {
53
          title: 'Shipment',
54
        },
55
        {
56
          type: 'autocomplete',
57
          source: airportKVData,
58
          title: 'Airport',
59
        },
60
      ]}
61
    />
62
  );
63
};
64

65
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const ExampleComponent = () => {
8
  const shipmentKVData = [
9
    ['Electronics and Gadgets', { key: 'LAX', value: 'Los Angeles International Airport' }],
10
    ['Medical Supplies', { key: 'JFK', value: 'John F. Kennedy International Airport' }],
11
    ['Auto Parts', { key: 'ORD', value: "Chicago O'Hare International Airport" }],
12
    ['Fresh Produce', { key: 'LHR', value: 'London Heathrow Airport' }],
13
    ['Textiles', { key: 'CDG', value: 'Charles de Gaulle Airport' }],
14
    ['Industrial Equipment', { key: 'DXB', value: 'Dubai International Airport' }],
15
    ['Pharmaceuticals', { key: 'HND', value: 'Tokyo Haneda Airport' }],
16
    ['Consumer Goods', { key: 'PEK', value: 'Beijing Capital International Airport' }],
17
    ['Machine Parts', { key: 'SIN', value: 'Singapore Changi Airport' }],
18
    ['Food Products', { key: 'AMS', value: 'Amsterdam Airport Schiphol' }],
19
  ];
20

21
  const airportKVData = [
22
    { key: 'LAX', value: 'Los Angeles International Airport' },
23
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
24
    { key: 'ORD', value: "Chicago O'Hare International Airport" },
25
    { key: 'LHR', value: 'London Heathrow Airport' },
26
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
27
    { key: 'DXB', value: 'Dubai International Airport' },
28
    { key: 'HND', value: 'Tokyo Haneda Airport' },
29
    { key: 'PEK', value: 'Beijing Capital International Airport' },
30
    { key: 'SIN', value: 'Singapore Changi Airport' },
31
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
32
    { key: 'FRA', value: 'Frankfurt Airport' },
33
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
34
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
35
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
36
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
37
    { key: 'MUC', value: 'Munich International Airport' },
38
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
39
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
40
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
41
    { key: 'ZRH', value: 'Zurich Airport' },
42
  ];
43

44
  return (
45
    <HotTable
46
      height="auto"
47
      autoWrapRow={true}
48
      autoWrapCol={true}
49
      licenseKey="non-commercial-and-evaluation"
50
      data={shipmentKVData}
51
      columns={[
52
        {
53
          title: 'Shipment',
54
        },
55
        {
56
          type: 'autocomplete',
57
          source: airportKVData,
58
          title: 'Airport',
59
        },
60
      ]}
61
    />
62
  );
63
};
64

65
export default ExampleComponent;

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.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const fruits = [
8
  'Apple',
9
  'Apricot',
10
  'Avocado',
11
  'Banana',
12
  'Blueberry',
13
  'Cherry',
14
  'Grape',
15
  'Lemon',
16
  'Lime',
17
  'Mango',
18
  'Orange',
19
  'Peach',
20
  'Pear',
21
  'Pineapple',
22
  'Plum',
23
  'Raspberry',
24
  'Strawberry',
25
  'Watermelon',
26
];
27

28
const ExampleComponent = () => {
29
  return (
30
    <HotTable
31
      height="auto"
32
      autoWrapRow={true}
33
      autoWrapCol={true}
34
      licenseKey="non-commercial-and-evaluation"
35
      data={[
36
        ['Apple', 'Apple'],
37
        ['Banana', 'Banana'],
38
        ['Cherry', 'Cherry'],
39
        ['Mango', 'Mango'],
40
        ['Orange', 'Orange'],
41
      ]}
42
      colHeaders={['Filter: true (default)', 'Filter: false']}
43
      columns={[
44
        {
45
          type: 'autocomplete',
46
          source: fruits,
47
          strict: false,
48
          // filter: true is the default — only matching options are shown
49
        },
50
        {
51
          type: 'autocomplete',
52
          source: fruits,
53
          strict: false,
54
          // don't hide options that don't match the search query
55
          filter: false,
56
        },
57
      ]}
58
    />
59
  );
60
};
61

62
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const fruits: string[] = [
8
  'Apple',
9
  'Apricot',
10
  'Avocado',
11
  'Banana',
12
  'Blueberry',
13
  'Cherry',
14
  'Grape',
15
  'Lemon',
16
  'Lime',
17
  'Mango',
18
  'Orange',
19
  'Peach',
20
  'Pear',
21
  'Pineapple',
22
  'Plum',
23
  'Raspberry',
24
  'Strawberry',
25
  'Watermelon',
26
];
27

28
const ExampleComponent = () => {
29
  return (
30
    <HotTable
31
      height="auto"
32
      autoWrapRow={true}
33
      autoWrapCol={true}
34
      licenseKey="non-commercial-and-evaluation"
35
      data={[
36
        ['Apple', 'Apple'],
37
        ['Banana', 'Banana'],
38
        ['Cherry', 'Cherry'],
39
        ['Mango', 'Mango'],
40
        ['Orange', 'Orange'],
41
      ]}
42
      colHeaders={['Filter: true (default)', 'Filter: false']}
43
      columns={[
44
        {
45
          type: 'autocomplete',
46
          source: fruits,
47
          strict: false,
48
          // filter: true is the default — only matching options are shown
49
        },
50
        {
51
          type: 'autocomplete',
52
          source: fruits,
53
          strict: false,
54
          // don't hide options that don't match the search query
55
          filter: false,
56
        },
57
      ]}
58
    />
59
  );
60
};
61

62
export default ExampleComponent;

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.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const colors = [
8
  'Black',
9
  'Blue',
10
  'brown',
11
  'cyan',
12
  'Gray',
13
  'green',
14
  'Lime',
15
  'Magenta',
16
  'Navy',
17
  'olive',
18
  'orange',
19
  'Pink',
20
  'Purple',
21
  'Red',
22
  'silver',
23
  'Teal',
24
  'White',
25
  'Yellow',
26
];
27

28
const ExampleComponent = () => {
29
  return (
30
    <HotTable
31
      height="auto"
32
      autoWrapRow={true}
33
      autoWrapCol={true}
34
      licenseKey="non-commercial-and-evaluation"
35
      data={[
36
        ['Black', 'Black'],
37
        ['Blue', 'Blue'],
38
        ['Gray', 'Gray'],
39
        ['Red', 'Red'],
40
        ['White', 'White'],
41
      ]}
42
      colHeaders={['Case-insensitive (default)', 'Case-sensitive']}
43
      columns={[
44
        {
45
          type: 'autocomplete',
46
          source: colors,
47
          strict: false,
48
          // filteringCaseSensitive: false is the default — typing "bl" matches "Black" and "blue"
49
        },
50
        {
51
          type: 'autocomplete',
52
          source: colors,
53
          strict: false,
54
          // match case while searching autocomplete options
55
          filteringCaseSensitive: true,
56
        },
57
      ]}
58
    />
59
  );
60
};
61

62
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const colors: string[] = [
8
  'Black',
9
  'Blue',
10
  'brown',
11
  'cyan',
12
  'Gray',
13
  'green',
14
  'Lime',
15
  'Magenta',
16
  'Navy',
17
  'olive',
18
  'orange',
19
  'Pink',
20
  'Purple',
21
  'Red',
22
  'silver',
23
  'Teal',
24
  'White',
25
  'Yellow',
26
];
27

28
const ExampleComponent = () => {
29
  return (
30
    <HotTable
31
      height="auto"
32
      autoWrapRow={true}
33
      autoWrapCol={true}
34
      licenseKey="non-commercial-and-evaluation"
35
      data={[
36
        ['Black', 'Black'],
37
        ['Blue', 'Blue'],
38
        ['Gray', 'Gray'],
39
        ['Red', 'Red'],
40
        ['White', 'White'],
41
      ]}
42
      colHeaders={['Case-insensitive (default)', 'Case-sensitive']}
43
      columns={[
44
        {
45
          type: 'autocomplete',
46
          source: colors,
47
          strict: false,
48
          // filteringCaseSensitive: false is the default — typing "bl" matches "Black" and "blue"
49
        },
50
        {
51
          type: 'autocomplete',
52
          source: colors,
53
          strict: false,
54
          // match case while searching autocomplete options
55
          filteringCaseSensitive: true,
56
        },
57
      ]}
58
    />
59
  );
60
};
61

62
export default ExampleComponent;

The `sortByRelevance` option

By default, the autocomplete dropdown shows suggestions in the order you provide them in the source array. Set sortByRelevance: false to sort suggestions alphabetically instead.

The left column uses the default behavior (sortByRelevance: true) — suggestions keep the order from source. The right column has sortByRelevance: false — suggestions sort alphabetically.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const statuses = [
8
  'Backlog',
9
  'In progress',
10
  'Blocked',
11
  'Done',
12
  'Cancelled',
13
];
14

15
const ExampleComponent = () => {
16
  return (
17
    <HotTable
18
      height="auto"
19
      autoWrapRow={true}
20
      autoWrapCol={true}
21
      licenseKey="non-commercial-and-evaluation"
22
      data={[
23
        ['Backlog', 'Backlog'],
24
        ['In progress', 'In progress'],
25
        ['Blocked', 'Blocked'],
26
        ['Done', 'Done'],
27
        ['Cancelled', 'Cancelled'],
28
      ]}
29
      colHeaders={['Source order (default)', 'Alphabetical order']}
30
      columns={[
31
        {
32
          type: 'autocomplete',
33
          source: statuses,
34
          strict: false,
35
          // sortByRelevance: true is the default — suggestions keep the order from `source`
36
        },
37
        {
38
          type: 'autocomplete',
39
          source: statuses,
40
          strict: false,
41
          // sort suggestions alphabetically instead of using the `source` order
42
          sortByRelevance: false,
43
        },
44
      ]}
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const statuses: string[] = [
8
  'Backlog',
9
  'In progress',
10
  'Blocked',
11
  'Done',
12
  'Cancelled',
13
];
14

15
const ExampleComponent = () => {
16
  return (
17
    <HotTable
18
      height="auto"
19
      autoWrapRow={true}
20
      autoWrapCol={true}
21
      licenseKey="non-commercial-and-evaluation"
22
      data={[
23
        ['Backlog', 'Backlog'],
24
        ['In progress', 'In progress'],
25
        ['Blocked', 'Blocked'],
26
        ['Done', 'Done'],
27
        ['Cancelled', 'Cancelled'],
28
      ]}
29
      colHeaders={['Source order (default)', 'Alphabetical order']}
30
      columns={[
31
        {
32
          type: 'autocomplete',
33
          source: statuses,
34
          strict: false,
35
          // sortByRelevance: true is the default — suggestions keep the order from `source`
36
        },
37
        {
38
          type: 'autocomplete',
39
          source: statuses,
40
          strict: false,
41
          // sort suggestions alphabetically instead of using the `source` order
42
          sortByRelevance: false,
43
        },
44
      ]}
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

The `allowHtml` option

By default, the autocomplete dropdown and cell renderer display source values as plain text, so any HTML tags they contain show up literally. Set allowHtml: true to render source values as HTML instead, for example to show colored status labels.

The left column uses the default behavior (allowHtml: false) — HTML tags in source show up as plain text. The right column has allowHtml: true — the same source values render as colored labels.

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const stockStatuses = [
8
  '<span style="color: #1a7f37">In stock</span>',
9
  '<span style="color: #b35900">Low stock</span>',
10
  '<span style="color: #c92a2a">Out of stock</span>',
11
  '<span style="color: #495057">Backordered</span>',
12
  '<span style="color: #495057">Discontinued</span>',
13
];
14

15
const ExampleComponent = () => {
16
  return (
17
    <HotTable
18
      height="auto"
19
      autoWrapRow={true}
20
      autoWrapCol={true}
21
      licenseKey="non-commercial-and-evaluation"
22
      data={[
23
        [stockStatuses[0], stockStatuses[0]],
24
        [stockStatuses[1], stockStatuses[1]],
25
        [stockStatuses[2], stockStatuses[2]],
26
        [stockStatuses[3], stockStatuses[3]],
27
        [stockStatuses[4], stockStatuses[4]],
28
      ]}
29
      colHeaders={['allowHtml: false (default)', 'allowHtml: true']}
30
      columns={[
31
        {
32
          type: 'autocomplete',
33
          source: stockStatuses,
34
          strict: false,
35
          // allowHtml: false is the default — HTML tags in `source` are shown as plain text
36
        },
37
        {
38
          type: 'autocomplete',
39
          source: stockStatuses,
40
          strict: false,
41
          // render `source` values as HTML — only use with trusted, static data
42
          allowHtml: true,
43
        },
44
      ]}
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

1
import { HotTable } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3

4
// register Handsontable's modules
5
registerAllModules();
6

7
const stockStatuses: string[] = [
8
  '<span style="color: #1a7f37">In stock</span>',
9
  '<span style="color: #b35900">Low stock</span>',
10
  '<span style="color: #c92a2a">Out of stock</span>',
11
  '<span style="color: #495057">Backordered</span>',
12
  '<span style="color: #495057">Discontinued</span>',
13
];
14

15
const ExampleComponent = () => {
16
  return (
17
    <HotTable
18
      height="auto"
19
      autoWrapRow={true}
20
      autoWrapCol={true}
21
      licenseKey="non-commercial-and-evaluation"
22
      data={[
23
        [stockStatuses[0], stockStatuses[0]],
24
        [stockStatuses[1], stockStatuses[1]],
25
        [stockStatuses[2], stockStatuses[2]],
26
        [stockStatuses[3], stockStatuses[3]],
27
        [stockStatuses[4], stockStatuses[4]],
28
      ]}
29
      colHeaders={['allowHtml: false (default)', 'allowHtml: true']}
30
      columns={[
31
        {
32
          type: 'autocomplete',
33
          source: stockStatuses,
34
          strict: false,
35
          // allowHtml: false is the default — HTML tags in `source` are shown as plain text
36
        },
37
        {
38
          type: 'autocomplete',
39
          source: stockStatuses,
40
          strict: false,
41
          // render `source` values as HTML — only use with trusted, static data
42
          allowHtml: true,
43
        },
44
      ]}
45
    />
46
  );
47
};
48

49
export default ExampleComponent;

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.

Keyboard shortcuts

The autocomplete cell editor shares its keyboard shortcuts with the handsontable editor. In strict mode, a few of these shortcuts behave differently — see Autocomplete strict mode.

Related guides

Cell type

Dropdown cell type

Select cell type

Configuration options

allowHtml

allowInvalid

filter

filteringCaseSensitive

Core methods

Hooks