xxxxxxxxxx
1
<div id="basic" class="form-outline" data-mdb-input-init>
2
<input type="text" id="form11" class="form-control" />
3
<label class="form-label" for="form1">Example label</label>
4
</div>
1
1
xxxxxxxxxx
1
const basicAutocomplete = document.querySelector('#basic');
2
const data = ['One', 'Two', 'Three', 'Four', 'Five'];
3
const dataFilter = (value) => {
4
return data.filter((item) => {
5
return item.toLowerCase().startsWith(value.toLowerCase());
6
});
7
};
8
9
new mdb.Autocomplete(basicAutocomplete, {
10
filter: dataFilter
11
});
12
13
const inputEl = document.querySelector('#form11');
14
inputEl.addEventListener('keydown', (e) => {
15
if (e.code !== "Enter") {
16
return;
17
}
18
19
const autocompleteId = basicAutocomplete.id;
20
const autocompleteDropdownId = `autocomplete-dropdown-${autocompleteId}`;
21
const autocompleteDropdownEl = document.querySelector(`#${autocompleteDropdownId}`);
22
23
if (!autocompleteDropdownEl) {
24
return;
25
}
26
27
const autocompleteDropdownItemsListEl = document.querySelectorAll(`#${autocompleteDropdownId} .autocomplete-item`);
28
autocompleteDropdownItemsListEl[0].click();
29
});
30
Console errors: 0