Navigation
Victoria Baker
 Santa Ana, CA

Handsontable- Autocomplete & Password

StatisticsInvoicesSchedule
HomeHandsontableAutocomplete & password
Support
Settings
Account securityAnalyticsAccessibility
All settings
Autocomplete type
Autocomplete lazy mode

This example shows the usage of the Autocomplete feature in the default lazymode. 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 Handsontablecell type. The options are rendered from the source property which can be an array, or a function that returns an array.

Car
Qty
Date
Color
Price
Mercedes
▼
10011/01/2015
▼
yellow
▼
$32,500.00
Chevrolet
▼
10011/02/2015
▼
red
▼
$42,400.00
Dodge
▼
10011/03/2015
▼
orange
▼
$24,900.00
Hummer
▼
10011/04/2015
▼
green
▼
$54,000.00
Suzuki
▼
10011/05/2015
▼
blue
▼
$29,300.00
Toyota
▼
10011/06/2015
▼
gray
▼
$54,500.00
Nissan
▼
10011/07/2015
▼
black
▼
$44,900.00
Porsche
▼
10011/08/2015
▼
white
▼
$35,000.00
Volkswagen
▼
10011/09/2015
▼
purple
▼
$41,000.00
BMW
▼
10011/10/2015
▼
lime
▼
$48,800.00
Audi
▼
10011/11/2015
▼
olive
▼
$21,000.00
Cadillac
▼
10011/12/2015
▼
cyan
▼
$63,900.00
Car
Qty
Date
Color
Price
Autocomplete strict mode

This is the same example as above with a difference that autocomplete now runs in strictmode. 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 allowInvalidoption determines the behaviour in case of manual user input.

Car
(allowInvalid true)
Qty
Date
Color
(allowInvalid false)
Price
Mercedes
▼
10011/01/2015
▼
yellow
▼
$32,500.00
Chevrolet
▼
10011/02/2015
▼
red
▼
$42,400.00
Dodge
▼
10011/03/2015
▼
orange
▼
$24,900.00
Hummer
▼
10011/04/2015
▼
green
▼
$54,000.00
Suzuki
▼
10011/05/2015
▼
blue
▼
$29,300.00
Toyota
▼
10011/06/2015
▼
gray
▼
$54,500.00
Nissan
▼
10011/07/2015
▼
black
▼
$44,900.00
Porsche
▼
10011/08/2015
▼
white
▼
$35,000.00
Volkswagen
▼
10011/09/2015
▼
purple
▼
$41,000.00
BMW
▼
10011/10/2015
▼
lime
▼
$48,800.00
Audi
▼
10011/11/2015
▼
olive
▼
$21,000.00
Cadillac
▼
10011/12/2015
▼
cyan
▼
$63,900.00
Car
(allowInvalid true)
Qty
Date
Color
(allowInvalid false)
Price
Autocomplete strict mode (Ajax)

Autocomplete can be also used with ajaxdata 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 sourceproperty. Function should perform the server side request and call the callback function when the result is available.

Car
Year
Chassis color
Bumper color
E
Mercedes
▼
10011/01/2015
▼
yellow
▼
$32,500.00
Chevrolet
▼
10011/02/2015
▼
red
▼
$42,400.00
Dodge
▼
10011/03/2015
▼
orange
▼
$24,900.00
Hummer
▼
10011/04/2015
▼
green
▼
$54,000.00
Suzuki
▼
10011/05/2015
▼
blue
▼
$29,300.00
Toyota
▼
10011/06/2015
▼
gray
▼
$54,500.00
Nissan
▼
10011/07/2015
▼
black
▼
$44,900.00
Porsche
▼
10011/08/2015
▼
white
▼
$35,000.00
Volkswagen
▼
10011/09/2015
▼
purple
▼
$41,000.00
BMW
▼
10011/10/2015
▼
lime
▼
$48,800.00
Audi
▼
10011/11/2015
▼
olive
▼
$21,000.00
Cadillac
▼
10011/12/2015
▼
cyan
▼
$63,900.00
Car
Year
Chassis color
Bumper color
E
Password type
Password cell type

The following examples show how to configure Handsontable with passwordcell 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.

ID
First name
Last name
Email
Password
1JoeFabianojoe.fabiano@ex.com*************
2FredWeclerfred.wecler@ex.com************
3SteveWilsonsteve.wilson@ex.com**********
4MariaFernandezm.fernandez@ex.com**********
5PierreBarbaultpierre.barbault@ex.com********
6NancyMoorenancy.moore@ex.com*********
7BarbaraMacDonaldb.macdonald@ex.com**********
8WilmaWilliamswilma.williams@ex.com***********
9SashaSilversasha.silver@ex.com**************
10DonPérignondon.pérignon@ex.com*************
11AaronKinleyaaron.kinley@ex.com***********
ID
First name
Last name
Email
Password
Fixed hash length

The following examples show how to configure Handsontable with passwordcell type with limited hash length. By default every hash has length equal to the length of value that it corresponds with. Use option hashLengthadded to column configuration to set fixed hash length. Here hash length is set to 8, so if password is longer, other symbols are hidden.

ID
First name
Last name
Email
Password
1JoeFabianojoe.fabiano@ex.com********
2FredWeclerfred.wecler@ex.com********
3SteveWilsonsteve.wilson@ex.com********
4MariaFernandezm.fernandez@ex.com********
5PierreBarbaultpierre.barbault@ex.com********
6NancyMoorenancy.moore@ex.com********
7BarbaraMacDonaldb.macdonald@ex.com********
8WilmaWilliamswilma.williams@ex.com********
9SashaSilversasha.silver@ex.com********
10DonPérignondon.pérignon@ex.com********
11AaronKinleyaaron.kinley@ex.com********
ID
First name
Last name
Email
Password
Custom hash symbol

The following examples show how to configure Handsontable with passwordcell type with custom hash symbol. By default every hash consists of asterisks *. Use option hashSymbolto 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.

ID
First name
Last name
Email
Password
1JoeFabianojoe.fabiano@ex.com■■■■■■■■■■■■■
2FredWeclerfred.wecler@ex.com■■■■■■■■■■■■
3SteveWilsonsteve.wilson@ex.com■■■■■■■■■■
4MariaFernandezm.fernandez@ex.com■■■■■■■■■■
5PierreBarbaultpierre.barbault@ex.com■■■■■■■■
6NancyMoorenancy.moore@ex.com■■■■■■■■■
7BarbaraMacDonaldb.macdonald@ex.com■■■■■■■■■■
8WilmaWilliamswilma.williams@ex.com■■■■■■■■■■■
9SashaSilversasha.silver@ex.com■■■■■■■■■■■■■■
10DonPérignondon.pérignon@ex.com■■■■■■■■■■■■■
11AaronKinleyaaron.kinley@ex.com■■■■■■■■■■■
ID
First name
Last name
Email
Password