Implementé Bootstrap 5 Autocompletar desde https://github.com/gch1p/bootstrap-5-autocomplete Obtengo datos de Firestore mi código:
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) } }Parece que funciona, pero no siempre. A veces, "onSelectItem" devuelve "null" (alrededor del 25%). Incluso si se hace clic en el mismo elemento. Revisé Chrome y Firefox. En Chrome, un poco mejor. Antes usaba Twitter para escribir con anticipación, pero es antiguo, así que quería probar algo nuevo. ¿Podría recomendar alguna API de autocompletar?
simplemente reemplace estas 2 líneas en autocomplete.js (función createItems).
reemplazar :
let dataLabel = e.target.getAttribute('data-label'); let dataValue = e.target.getAttribute('data-value');con :
let dataLabel = e.currentTarget.getAttribute('data-label'); let dataValue = e.currentTarget.getAttribute('data-value');o
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');