Autocomplete cell type

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

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.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
const colors = [
6
  'yellow',
7
  'red',
8
  'orange and another color',
9
  'green',
10
  'blue',
11
  'gray',
12
  'black',
13
  'white',
14
  'purple',
15
  'lime',
16
  'olive',
17
  'cyan',
18
];
19

20
@Component({
21
  selector: 'example1-autocomplete-cell-type',
22
  standalone: false,
23
  template: ` <div>
24
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
25
  </div>`,
26
})
27
export class Example1AutocompleteCellTypeComponent {
28

29
  readonly data = [
30
    ['BMW', 2017, 'black', 'black'],
31
    ['Nissan', 2018, 'blue', 'blue'],
32
    ['Chrysler', 2019, 'yellow', 'black'],
33
    ['Volvo', 2020, 'white', 'gray'],
34
  ];
35

36
  readonly gridSettings: GridSettings = {
37
    height: 'auto',
38
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
39
    autoWrapRow: true,
40
    autoWrapCol: true,
41
    columns: [
42
      {
43
        type: 'autocomplete',
44
        source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
45
        strict: false,
46
      },
47
      { type: 'numeric' },
48
      {
49
        type: 'autocomplete',
50
        source: colors,
51
        strict: false,
52
        visibleRows: 4,
53
      },
54
      {
55
        type: 'autocomplete',
56
        source: colors,
57
        strict: false,
58
        trimDropdown: false,
59
      },
60
    ]
61
  };
62
}
63
/* end-file */
64

65

66
/* file: app.module.ts */
67
import { NgModule, ApplicationConfig } from '@angular/core';
68
import { BrowserModule } from '@angular/platform-browser';
69
import { registerAllModules } from 'handsontable/registry';
70
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
71
import { CommonModule } from '@angular/common';
72
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
73
/* start:skip-in-compilation */
74
import { Example1AutocompleteCellTypeComponent } from './app.component';
75
/* end:skip-in-compilation */
76

77
// register Handsontable's modules
78
registerAllModules();
79

80
export const appConfig: ApplicationConfig = {
81
  providers: [
82
    {
83
      provide: HOT_GLOBAL_CONFIG,
84
      useValue: {
85
        license: NON_COMMERCIAL_LICENSE,
86
      } as HotGlobalConfig
87
    }
88
  ],
89
};
90

91
@NgModule({
92
  imports: [ BrowserModule, HotTableModule, CommonModule ],
93
  declarations: [ Example1AutocompleteCellTypeComponent ],
94
  providers: [...appConfig.providers],
95
  bootstrap: [ Example1AutocompleteCellTypeComponent ]
96
})
97

98
export class AppModule { }
99
/* end-file */

1
<div>
2
  <example1-autocomplete-cell-type></example1-autocomplete-cell-type>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
const colors = [
6
  'yellow',
7
  'red',
8
  'orange and another color',
9
  'green',
10
  'blue',
11
  'gray',
12
  'black',
13
  'white',
14
  'purple',
15
  'lime',
16
  'olive',
17
  'cyan',
18
];
19

20
@Component({
21
  selector: 'example2-autocomplete-cell-type',
22
  standalone: false,
23
  template: ` <div>
24
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
25
  </div>`,
26
})
27
export class Example2AutocompleteCellTypeComponent {
28

29
  readonly data = [
30
    ['BMW', 2017, 'black', 'black'],
31
    ['Nissan', 2018, 'blue', 'blue'],
32
    ['Chrysler', 2019, 'yellow', 'black'],
33
    ['Volvo', 2020, 'white', 'gray'],
34
  ];
35

36
  readonly gridSettings: GridSettings = {
37
    height: 'auto',
38
    colHeaders: [
39
      'Car<br>(allowInvalid true)',
40
      'Year',
41
      'Chassis color',
42
      'Bumper color<br>(allowInvalid true)',
43
    ],
44
    autoWrapRow: true,
45
    autoWrapCol: true,
46
    columns: [
47
      {
48
        type: 'autocomplete',
49
        source: ['BMW', 'Chrysler', 'Nissan', 'Suzuki', 'Toyota', 'Volvo'],
50
        strict: true,
51
      },
52
      {},
53
      {
54
        type: 'autocomplete',
55
        source: colors,
56
        strict: true,
57
      },
58
      {
59
        type: 'autocomplete',
60
        source: colors,
61
        strict: true,
62
        allowInvalid: true, // true is default
63
      },
64
    ]
65
  };
66
}
67
/* end-file */
68

69

70
/* file: app.module.ts */
71
import { NgModule, ApplicationConfig } from '@angular/core';
72
import { BrowserModule } from '@angular/platform-browser';
73
import { registerAllModules } from 'handsontable/registry';
74
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
75
import { CommonModule } from '@angular/common';
76
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
77
/* start:skip-in-compilation */
78
import { Example2AutocompleteCellTypeComponent } from './app.component';
79
/* end:skip-in-compilation */
80

81
// register Handsontable's modules
82
registerAllModules();
83

84
export const appConfig: ApplicationConfig = {
85
  providers: [
86
    {
87
      provide: HOT_GLOBAL_CONFIG,
88
      useValue: {
89
        license: NON_COMMERCIAL_LICENSE,
90
      } as HotGlobalConfig
91
    }
92
  ],
93
};
94

95
@NgModule({
96
  imports: [ BrowserModule, HotTableModule, CommonModule ],
97
  declarations: [ Example2AutocompleteCellTypeComponent ],
98
  providers: [...appConfig.providers],
99
  bootstrap: [ Example2AutocompleteCellTypeComponent ]
100
})
101

102
export class AppModule { }
103
/* end-file */

1
<div>
2
  <example2-autocomplete-cell-type></example2-autocomplete-cell-type>
3
</div>

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.

1
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example3-autocomplete-cell-type',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`
11
})
12
export class Example3AutocompleteCellTypeComponent {
13

14
  readonly data = [
15
    ['BMW', 2017, 'black', 'black'],
16
    ['Nissan', 2018, 'blue', 'blue'],
17
    ['Chrysler', 2019, 'yellow', 'black'],
18
    ['Volvo', 2020, 'white', 'gray'],
19
  ];
20

21
  readonly gridSettings: GridSettings = {
22
    height: 'auto',
23
    colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
24
    autoWrapRow: true,
25
    autoWrapCol: true,
26
    columns: [
27
      {
28
        type: 'autocomplete',
29
        source: (_query, process) => {
30
          fetch('https://handsontable.com/docs/scripts/json/autocomplete.json')
31
              .then((response) => response.json())
32
              .then((response) => process(response.data));
33
        },
34
        strict: true,
35
      },
36
      {}, // Year is a default text column
37
      {}, // Chassis color is a default text column
38
      {}, // Bumper color is a default text column
39
    ]
40
  };
41
}
42
/* end-file */
43

44

45
/* file: app.module.ts */
46
import { NgModule, ApplicationConfig } from '@angular/core';
47
import { BrowserModule } from '@angular/platform-browser';
48
import { registerAllModules } from 'handsontable/registry';
49
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
50
import { CommonModule } from '@angular/common';
51
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
52
/* start:skip-in-compilation */
53
import { Example3AutocompleteCellTypeComponent } from './app.component';
54
/* end:skip-in-compilation */
55

56
// register Handsontable's modules
57
registerAllModules();
58

59
export const appConfig: ApplicationConfig = {
60
  providers: [
61
    {
62
      provide: HOT_GLOBAL_CONFIG,
63
      useValue: {
64
        license: NON_COMMERCIAL_LICENSE,
65
      } as HotGlobalConfig
66
    }
67
  ],
68
};
69

70
@NgModule({
71
  imports: [ BrowserModule, HotTableModule, CommonModule ],
72
  declarations: [ Example3AutocompleteCellTypeComponent ],
73
  providers: [...appConfig.providers],
74
  bootstrap: [ Example3AutocompleteCellTypeComponent ]
75
})
76

77
export class AppModule { }
78
/* end-file */

1
<div>
2
  <example3-autocomplete-cell-type></example3-autocomplete-cell-type>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example4-autocomplete-cell-type',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
10
  </div>`
11
})
12
export class Example4AutocompleteCellTypeComponent {
13
  readonly shipmentKVData = [
14
    ['Electronics and Gadgets','Los Angeles International Airport'],
15
    ['Medical Supplies', 'John F. Kennedy International Airport'],
16
    ['Auto Parts', 'Chicago O\'Hare International Airport'],
17
    ['Fresh Produce', 'London Heathrow Airport'],
18
    ['Textiles', 'Charles de Gaulle Airport'],
19
    ['Industrial Equipment', 'Dubai International Airport'],
20
    ['Pharmaceuticals', 'Tokyo Haneda Airport'],
21
    ['Consumer Goods', 'Beijing Capital International Airport'],
22
    ['Machine Parts', 'Singapore Changi Airport'],
23
    ['Food Products', 'Amsterdam Airport Schiphol']
24
  ];
25

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

49
  readonly gridSettings: GridSettings = {
50
    height: 'auto',
51
    autoWrapRow: true,
52
    autoWrapCol: true,
53
    columns: [
54
      {
55
        title: 'Shipment',
56
      },
57
      {
58
        type: 'autocomplete',
59
        source: this.airportKVData,
60
        title: 'Airport',
61
      },
62
    ],
63
  };
64
}
65
/* end-file */
66

67

68
/* file: app.module.ts */
69
import { NgModule, ApplicationConfig } from '@angular/core';
70
import { BrowserModule } from '@angular/platform-browser';
71
import { registerAllModules } from 'handsontable/registry';
72
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
73
import { CommonModule } from '@angular/common';
74
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
75
/* start:skip-in-compilation */
76
import { Example4AutocompleteCellTypeComponent } from './app.component';
77
/* end:skip-in-compilation */
78

79
// register Handsontable's modules
80
registerAllModules();
81

82
export const appConfig: ApplicationConfig = {
83
  providers: [
84
    {
85
      provide: HOT_GLOBAL_CONFIG,
86
      useValue: {
87
        license: NON_COMMERCIAL_LICENSE,
88
      } as HotGlobalConfig
89
    }
90
  ],
91
};
92

93
@NgModule({
94
  imports: [ BrowserModule, HotTableModule, CommonModule ],
95
  declarations: [ Example4AutocompleteCellTypeComponent ],
96
  providers: [...appConfig.providers],
97
  bootstrap: [ Example4AutocompleteCellTypeComponent ]
98
})
99

100
export class AppModule { }
101
/* end-file */

1
<div>
2
  <example4-autocomplete-cell-type></example4-autocomplete-cell-type>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example5-autocomplete-cell-type',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="shipmentKVData" [settings]="gridSettings"></hot-table>
10
  </div>`
11
})
12
export class Example5AutocompleteCellTypeComponent {
13
  readonly shipmentKVData = [
14
    [
15
      'Electronics and Gadgets',
16
      { key: 'LAX', value: 'Los Angeles International Airport' },
17
    ],
18
    [
19
      'Medical Supplies',
20
      { key: 'JFK', value: 'John F. Kennedy International Airport' }
21
    ],
22
    [
23
      'Auto Parts',
24
      { key: 'ORD', value: 'Chicago O\'Hare International Airport' }
25
    ],
26
    [
27
      'Fresh Produce',
28
      { key: 'LHR', value: 'London Heathrow Airport' }
29
    ],
30
    [
31
      'Textiles',
32
      { key: 'CDG', value: 'Charles de Gaulle Airport' }
33
    ],
34
    [
35
      'Industrial Equipment',
36
      { key: 'DXB', value: 'Dubai International Airport' }
37
    ],
38
    [
39
      'Pharmaceuticals',
40
      { key: 'HND', value: 'Tokyo Haneda Airport' }
41
    ],
42
    [
43
      'Consumer Goods',
44
      { key: 'PEK', value: 'Beijing Capital International Airport' }
45
    ],
46
    [
47
      'Machine Parts',
48
      { key: 'SIN', value: 'Singapore Changi Airport' }
49
    ],
50
    [
51
      'Food Products',
52
      { key: 'AMS', value: 'Amsterdam Airport Schiphol' }
53
    ]
54
  ];
55

56
  readonly airportKVData = [
57
    { key: 'LAX', value: 'Los Angeles International Airport' },
58
    { key: 'JFK', value: 'John F. Kennedy International Airport' },
59
    { key: 'ORD', value: 'Chicago O\'Hare International Airport' },
60
    { key: 'LHR', value: 'London Heathrow Airport' },
61
    { key: 'CDG', value: 'Charles de Gaulle Airport' },
62
    { key: 'DXB', value: 'Dubai International Airport' },
63
    { key: 'HND', value: 'Tokyo Haneda Airport' },
64
    { key: 'PEK', value: 'Beijing Capital International Airport' },
65
    { key: 'SIN', value: 'Singapore Changi Airport' },
66
    { key: 'AMS', value: 'Amsterdam Airport Schiphol' },
67
    { key: 'FRA', value: 'Frankfurt Airport' },
68
    { key: 'ICN', value: 'Seoul Incheon International Airport' },
69
    { key: 'YYZ', value: 'Toronto Pearson International Airport' },
70
    { key: 'MAD', value: 'Madrid-Barajas Airport' },
71
    { key: 'BKK', value: 'Bangkok Suvarnabhumi Airport' },
72
    { key: 'MUC', value: 'Munich International Airport' },
73
    { key: 'SYD', value: 'Sydney Kingsford Smith Airport' },
74
    { key: 'BCN', value: 'Barcelona-El Prat Airport' },
75
    { key: 'KUL', value: 'Kuala Lumpur International Airport' },
76
    { key: 'ZRH', value: 'Zurich Airport' }
77
  ];
78

79
  readonly gridSettings: GridSettings = {
80
    height: 'auto',
81
    autoWrapRow: true,
82
    autoWrapCol: true,
83
    columns: [
84
      {
85
        title: 'Shipment',
86
      },
87
      {
88
        type: 'autocomplete',
89
        source: this.airportKVData,
90
        title: 'Airport',
91
      },
92
    ],
93
  };
94
}
95
/* end-file */
96

97

98
/* file: app.module.ts */
99
import { NgModule, ApplicationConfig } from '@angular/core';
100
import { BrowserModule } from '@angular/platform-browser';
101
import { registerAllModules } from 'handsontable/registry';
102
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
103
import { CommonModule } from '@angular/common';
104
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
105
/* start:skip-in-compilation */
106
import { Example5AutocompleteCellTypeComponent } from './app.component';
107
/* end:skip-in-compilation */
108

109
// register Handsontable's modules
110
registerAllModules();
111

112
export const appConfig: ApplicationConfig = {
113
  providers: [
114
    {
115
      provide: HOT_GLOBAL_CONFIG,
116
      useValue: {
117
        license: NON_COMMERCIAL_LICENSE,
118
      } as HotGlobalConfig
119
    }
120
  ],
121
};
122

123
@NgModule({
124
  imports: [ BrowserModule, HotTableModule, CommonModule ],
125
  declarations: [ Example5AutocompleteCellTypeComponent ],
126
  providers: [...appConfig.providers],
127
  bootstrap: [ Example5AutocompleteCellTypeComponent ]
128
})
129

130
export class AppModule { }
131
/* end-file */

1
<div>
2
  <example5-autocomplete-cell-type></example5-autocomplete-cell-type>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example6-autocomplete-cell-type',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`
11
})
12
export class Example6AutocompleteCellTypeComponent {
13
  readonly fruits = [
14
    'Apple',
15
    'Apricot',
16
    'Avocado',
17
    'Banana',
18
    'Blueberry',
19
    'Cherry',
20
    'Grape',
21
    'Lemon',
22
    'Lime',
23
    'Mango',
24
    'Orange',
25
    'Peach',
26
    'Pear',
27
    'Pineapple',
28
    'Plum',
29
    'Raspberry',
30
    'Strawberry',
31
    'Watermelon',
32
  ];
33

34
  readonly data = [
35
    ['Apple', 'Apple'],
36
    ['Banana', 'Banana'],
37
    ['Cherry', 'Cherry'],
38
    ['Mango', 'Mango'],
39
    ['Orange', 'Orange'],
40
  ];
41

42
  readonly gridSettings: GridSettings = {
43
    height: 'auto',
44
    autoWrapRow: true,
45
    autoWrapCol: true,
46
    colHeaders: ['Filter: true (default)', 'Filter: false'],
47
    columns: [
48
      {
49
        type: 'autocomplete',
50
        source: this.fruits,
51
        strict: false,
52
      },
53
      {
54
        type: 'autocomplete',
55
        source: this.fruits,
56
        strict: false,
57
        // don't hide options that don't match the search query
58
        filter: false,
59
      },
60
    ],
61
  };
62
}
63
/* end-file */
64

65

66
/* file: app.module.ts */
67
import { NgModule, ApplicationConfig } from '@angular/core';
68
import { BrowserModule } from '@angular/platform-browser';
69
import { registerAllModules } from 'handsontable/registry';
70
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
71
import { CommonModule } from '@angular/common';
72
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
73
/* start:skip-in-compilation */
74
import { Example6AutocompleteCellTypeComponent } from './app.component';
75
/* end:skip-in-compilation */
76

77
// register Handsontable's modules
78
registerAllModules();
79

80
export const appConfig: ApplicationConfig = {
81
  providers: [
82
    {
83
      provide: HOT_GLOBAL_CONFIG,
84
      useValue: {
85
        license: NON_COMMERCIAL_LICENSE,
86
      } as HotGlobalConfig
87
    }
88
  ],
89
};
90

91
@NgModule({
92
  imports: [ BrowserModule, HotTableModule, CommonModule ],
93
  declarations: [ Example6AutocompleteCellTypeComponent ],
94
  providers: [...appConfig.providers],
95
  bootstrap: [ Example6AutocompleteCellTypeComponent ]
96
})
97

98
export class AppModule { }
99
/* end-file */

1
<div>
2
  <example6-autocomplete-cell-type></example6-autocomplete-cell-type>
3
</div>

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
/* file: app.component.ts */
2
import { Component } from '@angular/core';
3
import { GridSettings } from '@handsontable/angular-wrapper';
4

5
@Component({
6
  selector: 'example7-autocomplete-cell-type',
7
  standalone: false,
8
  template: ` <div>
9
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
10
  </div>`
11
})
12
export class Example7AutocompleteCellTypeComponent {
13
  readonly colors = [
14
    'Black',
15
    'Blue',
16
    'brown',
17
    'cyan',
18
    'Gray',
19
    'green',
20
    'Lime',
21
    'Magenta',
22
    'Navy',
23
    'olive',
24
    'orange',
25
    'Pink',
26
    'Purple',
27
    'Red',
28
    'silver',
29
    'Teal',
30
    'White',
31
    'Yellow',
32
  ];
33

34
  readonly data = [
35
    ['Black', 'Black'],
36
    ['Blue', 'Blue'],
37
    ['Gray', 'Gray'],
38
    ['Red', 'Red'],
39
    ['White', 'White'],
40
  ];
41

42
  readonly gridSettings: GridSettings = {
43
    height: 'auto',
44
    autoWrapRow: true,
45
    autoWrapCol: true,
46
    colHeaders: ['Case-insensitive (default)', 'Case-sensitive'],
47
    columns: [
48
      {
49
        type: 'autocomplete',
50
        source: this.colors,
51
        strict: false,
52
      },
53
      {
54
        type: 'autocomplete',
55
        source: this.colors,
56
        strict: false,
57
        // match case while searching autocomplete options
58
        filteringCaseSensitive: true,
59
      },
60
    ],
61
  };
62
}
63
/* end-file */
64

65

66
/* file: app.module.ts */
67
import { NgModule, ApplicationConfig } from '@angular/core';
68
import { BrowserModule } from '@angular/platform-browser';
69
import { registerAllModules } from 'handsontable/registry';
70
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, HotTableModule } from '@handsontable/angular-wrapper';
71
import { CommonModule } from '@angular/common';
72
import { NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
73
/* start:skip-in-compilation */
74
import { Example7AutocompleteCellTypeComponent } from './app.component';
75
/* end:skip-in-compilation */
76

77
// register Handsontable's modules
78
registerAllModules();
79

80
export const appConfig: ApplicationConfig = {
81
  providers: [
82
    {
83
      provide: HOT_GLOBAL_CONFIG,
84
      useValue: {
85
        license: NON_COMMERCIAL_LICENSE,
86
      } as HotGlobalConfig
87
    }
88
  ],
89
};
90

91
@NgModule({
92
  imports: [ BrowserModule, HotTableModule, CommonModule ],
93
  declarations: [ Example7AutocompleteCellTypeComponent ],
94
  providers: [...appConfig.providers],
95
  bootstrap: [ Example7AutocompleteCellTypeComponent ]
96
})
97

98
export class AppModule { }
99
/* end-file */

1
<div>
2
  <example7-autocomplete-cell-type></example7-autocomplete-cell-type>
3
</div>

Related guides

Cell type

Dropdown cell type

Select cell type

Configuration options

allowHtml

filter

filteringCaseSensitive

Core methods

Hooks