xxxxxxxxxx
1
<div id="async" class="form-outline autocomplete">
2
<input type="text" id="form2" class="form-control" />
3
<label class="form-label" for="form2">Example label</label>
4
</div>
1
1
xxxxxxxxxx
1
const asyncAutocomplete = document.querySelector('#async');
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
asyncAutocomplete.addEventListener("itemSelect.mdb.autocomplete", (e) => {
10
e.preventDefault();
11
});
12
let count = 0
13
new mdb.Autocomplete(asyncAutocomplete, {
14
filter: asyncFilter,
15
displayValue: (value) => value.name,
16
itemContent: (result) => {
17
count = count
18
let follow_text = `<a class="bg-warning m-2 text-capitalize p-2" id="button-${count++}">Follow</a>`;
19
20
return `<div class="row bg-gray-3 justify-content-between">
21
<div class="col d-flex align-items-center">
22
Icon
23
</div>
24
<div class="col d-flex align-items-center" >`+follow_text+`
25
</div>
26
</div>`;
27
28
}
29
});
30
asyncAutocomplete.addEventListener("open.mdb.autocomplete", (e) => {
31
setTimeout(()=>{
32
for (i=0; i <= 10; i++){
33
const aTag = document.querySelector(`#button-${i}`)
34
aTag.setAttribute('onclick', `test('#button-${i}')`)
35
aTag.setAttribute('value', `${i}`)
36
}},10)
37
});
38
39
40
function test(id){
41
console.log(id);
42
}
43
Console errors: 0