Autocomplete API ​

const autocomplete = document.querySelector('awc-autocomplete');

Methods ​

open ​

Whether the listbox is visible or not.

autocomplete.open;
// => false

show ​

Shows the listbox.

autocomplete.show();

hide ​

Hides the listbox.

autocomplete.hide();

value ​

Returns all the selected values.

autocomplete.value;
// => ['1', '2']

setValue ​

Sets the value of the element.

autocomplete.setValue('apple', 'Apple');
autocomplete.value;
// => ['apple']

removeValue ​

Removes a value from the element.

autocomplete.removeValue('apple');
autocomplete.value;
// => []

activate ​

Activates an option by setting the data-active attribute.

const option = autocomplete.options[0];
autocomplete.activate(option, { scroll: true });

deactivate ​

Deactivates the active option by removing the data-active attribute.

autocomplete.deactivate();

clear ​

Deselects all the selected options.

autocomplete.clear();

reset ​

Resets the autocomplete value to its initial state.

autocomplete.reset();

focus ​

Sets the focus on the input element. This method also accepts a list of focus options.

autocomplete.focus();

blur ​

Removes keyboard focus from the input element.

autocomplete.blur();

activeOption ​

Returns the option that has the data-active attribute.

autocomplete.activeOption;

visibleOptions ​

Returns all the visible options of the autocomplete element.

autocomplete.visibleOptions;

options ​

Returns all the options of the autocomplete element.

autocomplete.options;

form ​

Returns the parent form element.

autocomplete.form;

Events ​