Probé muchas implementaciones diferentes para actualizar las opciones de la lista de datos a partir de una solicitud de búsqueda, pero todas las que hice resultaron en un comportamiento poco confiable en el uso.

Tengo esta enorme celda creada dinámicamente en una tabla que, cuando se crea, rellena automáticamente los campos de identidad con el número de fila:

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

Y llama a esta función en la entrada del usuario:

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

La función searchAtServer es una búsqueda asíncrona:

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

Mi problema

Publica de manera confiable y captura la entrada del usuario de manera confiable, pero el campo de la lista de datos no se completa automáticamente de manera confiable. A veces tiene las opciones correctas, pero otras veces no se comporta como esperaba: no enumera nada, enumera los números 1/2, enumera los números 1/2 + la respuesta correcta, enumera las respuestas antiguas.

Mi objetivo principal es completar automáticamente una lista desplegable de opciones del servidor para la entrada.