UI Libraries
/
Autocomplete
/
Upgrading
May. 04, 2021
Upgrading
Autocomplete v1 offers many new features that are explained in Core concepts. Please read this documentation to understand the new capabilities.
Import
Copy
1
2
3
4
5
// Before
import autocomplete from 'autocomplete.js';
// After
import { autocomplete } from '@algolia/autocomplete-js';
Read more about installation options in the Getting Started guide.
Parameters
These parameters and how you use them have changed from Autocomplete v0:
| v0 | v1 |
|---|---|
autocomplete('#autocomplete', /* ... */) |
autocomplete({ container: '#autocomplete', /* ... */ }) |
autoselect: true |
defaultActiveItemId: 0 |
autoselectOnBlur: true |
No longer needed; this is the default behavior |
tabAutocomplete: true |
No longer supported; v1 implements the ARIA 1.1 form of the combobox design pattern |
hint |
No longer supported |
clearOnSelected |
This is now local to the source: getItemInputValue: () => '' |
dropdownMenuContainer |
panelContainer |
templates (top-level) |
render and renderNoResults |
cssClasses |
classNames where properties have changed |
keyboardShortcuts |
No longer supported as an option; check out the keyboard navigation docs |
minLength: 0 |
openOnFocus: true |
Datasets
Datasets are replaced by the getSources function. Learn more about Sources concept.
Sources
Sources are replaced by getItems.
Templates
Learn more about Templates concept.
Top-level API
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Before
const search = autocomplete(/* ... */);
search.autocomplete.open();
search.autocomplete.close();
search.autocomplete.getVal();
search.autocomplete.setVal('Query');
search.autocomplete.destroy();
// After
const search = autocomplete(/* ... */);
search.setIsOpen(true);
search.setIsOpen(false);
search.setQuery('Query');
search.destroy();
