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

118
Visualizações
How to reliably update a datalist with web call in javascript?

I've tried a lot of different implementations of updating datalist options from a fetch request, but every one I've done results in unreliable behavior in usage.

I have this huge dynamically created cell in a table which when created autopoulates the identity fields with the row number:

cell2.innerHTML = '<td scope="row"> <input form="form' + rowNumber + '" type="text" name="productCode" id="form' + rowNumber + 'productCode" value="" ' 
+ 'class="form-control" list="datalist' + rowNumber + 'productCode" onInput="searchProductCode(' + rowNumber + ')" autocomplete="false" />'
    + '<datalist id="datalist' + rowNumber + 'productCode"></datalist>' + '</td>';

And calls this function on user input:

async function searchProductCode(rowNumber) {
    var data = document.getElementById("form" + rowNumber + "productCode").value;
    var dataList = document.getElementById("datalist" + rowNumber + "productCode");
    dataList.innerHTML = ""

    if (data.length < 3) {
        return
    }

    var products = await searchAtServer("/products/search", data)

    for await (product of products) {
        let option = document.createElement("option");
        option.setAttribute("data-id", product.id);
        option.value = product.code;

        dataList.appendChild(option);
    }

The searchAtServer function is an async fetch:

async function searchAtServer(address, data) {
    return fetch(address, {
        method: 'post',
        headers: { 'Content-Type': 'text/plain' },
        body: data
    })
    .then(function (response) {
        return response.json();
    })
    .catch(function (error) {
        console.log(address + 'Request failed', error);
    })
}

My Problem

It posts reliably and captures user input reliably but the datalist field doesn't autopopulate reliably. Sometimes it has the correct options but other times it doesn't behave as I expect: not listing anything, listing numbers 1/2, listing numbers 1/2+the correct response, listing old responses.

My main goal is to autopopulate a dropdown list of options from the server for entry.

about 4 years ago · Juan Pablo Isaza
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