Bootstrap 5自动完成返回null OnSelectItem

Question

我从 https://github.com/gch1p/bootstrap-5-autococte 我从Firestore那里得到数据 我的代码：

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)
  }
}

它看起来有效，但并非总是如此。有时“ OnSelectItem”返回“ null”（约25％）。即使单击相同的元素。我检查了Chrome和Firefox。在Chrome上，更好。在使用Twitter Typeahead之前，但是它很旧，所以我想尝试一些新的东西。 您能推荐任何自动完成API吗？

Answer 1

只需在autocomplete.js（函数createItems）中替换这2行..

替换：

let dataLabel = e.target.getAttribute('data-label');
let dataValue = e.target.getAttribute('data-value');

或：

let dataLabel = e.currentTarget.getAttribute('data-label');
let dataValue = e.currentTarget.getAttribute('data-value');

或

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');