Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
Bootstrap 5 Autocomplete returns null onSelectItem

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?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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');
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda