Upgrading

Learn how to upgrade from Autocomplete v0 to Autocomplete v1.

Autocomplete v1 offers many new features that are explained in Core concepts. Please read this documentation to understand the new capabilities.

Import#

// 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:

v0v1
autocomplete('#autocomplete', /* ... */)autocomplete({ container: '#autocomplete', /* ... */ })
autoselect: truedefaultActiveItemId: 0
autoselectOnBlur: trueNo longer needed; this is the default behavior
tabAutocomplete: trueNo longer supported; v1 implements the ARIA 1.1 form of the combobox design pattern
hintNo longer supported
clearOnSelectedThis is now local to the source: getItemInputValue: () => ''
dropdownMenuContainerpanelContainer
templates (top-level)render and renderNoResults
cssClassesclassNames where properties have changed
keyboardShortcutsNo longer supported as an option; check out the keyboard navigation docs
minLength: 0openOnFocus: true

Datasets#

Datasets are replaced by the getSources function. Learn more about Sources concept.

Sources#

Sources are replaced by getItems.

Templates#

  • The suggestion template is renamed item.
  • The empty template is renamed noResults.

Learn more about Templates concept.

Top-level API#

// 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();