Estoy tratando de implementar un menú desplegable de autocompletar con datos dinámicos, pero no muestra ninguna sugerencia en el menú desplegable. Estoy usando este ejemplo - Listas de datos: https://getbootstrap.com/docs/5.1/forms/form-control/ que funciona bien con etiquetas de opciones predefinidas.
<label for="exampleDataList" class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."> <datalist id="datalistOptions"> ... dynamic data here </datalist>Recibo datos del script PHP y se accede a ellos correctamente, pero creo que el problema podría deberse a la demora en la recuperación. HTML puede esperar que los datos ya estén allí cuando se carguen. Es por eso que tal vez funcione con datos existentes.
aquí está el código javacsript dentro de la función fetch donde produzco dinámicamente las etiquetas:
var select = document.getElementById("datalistOptions"); select.innerHTML = ""; for (var key in data['result']) { var val = data['result'][key]; if (data['result'].hasOwnProperty(key) && key != "error") { var val = data['result'][key]; if (val != "") { var option = document.createElement("option"); option.value = val.id; select.appendChild(option); } } }Actualización: cambié un poco el código js. Ahora usa appendChild en lugar de agregar la función. El anterior no agregaba ninguna opción a la lista de datos. appendChild agrega opciones a la lista pero no las muestra.
Esta es una versión más simple de lo que intentas hacer. Trate de tomarlo, agregue sus condiciones y haga que los datos vengan en esa forma si puede.
var data = ["Haifa","Tel Aviv","Jerusalem"]; var select = document.getElementById("datalistOptions"); select.innerHTML = ""; for (var key in data) { var option = document.createElement("option"); option.label = data[key]; option.value = data[key]; select.appendChild(option); }Y asegúrese de agregar el evento onclick que llama a su secuencia de comandos, tal vez este sea su problema, que no está llamando a la secuencia de comandos. Recomendaría algo así:
<input onclick="datalistCreate()" class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">datalistCreate() es el nombre de la función en el script.