I implemented Bootstrap 5 Autocomplete from https://github.com/gch1p/bootstrap-5-autocomplete I get data from Firestore my code:
async function getProductsArray() {
let autoCompleteArray = [];
try {
const [productsArray, productsDefault] = await getSettingsProducts();
productsArray.sort();
productsArray.forEach((element, index) => {
autoCompleteArray.push({
label: element,
value: element
});
});
const field = document.getElementById('productsAutoComplete');
const ac = new Autocomplete(field, {
//data: [{label: "I'm a label", value: 42}],
data: autoCompleteArray,
maximumItems: 5,
threshold: 1,
onSelectItem: ({
label,
value
}) => {
console.log("user selected:", label, value);
document.getElementById('productsAutoComplete').value = "";
//createKitElements(label, 1);
//console.log(label)
inputVal(label);
}
});
} catch (error) {
console.log("Get Products Error: ", error);
// errorInfo(error)
}
}
It looks like it works, but not always. Sometimes "onSelectItem" returns "null"(about 25%). Even if the same element is clicked. I checked on chrome and Firefox. On Chrome, a bit better. Before I used Twitter typeahead, but it is old, so I wanted to try something new. Could you recommend any autocomplete api?
just replace these 2 lines in autocomplete.js ( function createItems )..
replace :
let dataLabel = e.target.getAttribute('data-label');
let dataValue = e.target.getAttribute('data-value');
with :
let dataLabel = e.currentTarget.getAttribute('data-label');
let dataValue = e.currentTarget.getAttribute('data-value');
or
let dataLabel = e.target.getAttribute('data-label') || e.target.parentNode.getAttribute('data-label');
let dataValue = e.target.getAttribute('data-value') || e.target.parentNode.getAttribute('data-value');