xxxxxxxxxx
1
<div class="container pt-5 my-5">
2
<div id="brand_search" class="form-outline autocomplete">
3
<input type="text" id="search_form" class="form-control" />
4
<label class="form-label" for="form2">Search brands</label>
5
</div>
6
</div>
7
1
1
xxxxxxxxxx
1
const asyncAutocomplete = document.getElementById('brand_search');
2
const asyncFilter = async (query) => {
3
const url = `https://swapi.py4e.com/api/people/?search=${encodeURI(query)}`;
4
const response = await fetch(url);
5
const data = await response.json();
6
return data.results;
7
};
8
9
const autoComplete = new mdb.Autocomplete(asyncAutocomplete, {
10
filter: asyncFilter,
11
displayValue: (value) => value.name,
12
threshold: 2
13
});
14
//autoComplete.open();
15
asyncAutocomplete.addEventListener('itemSelect.mdb.autocomplete', (e) => {
16
console.log(e);
17
console.log(document.getElementById("search_form").value);
18
})
19
Console errors: 0