Actualmente estoy tratando de agregar a mi lista de datos para mi campo de texto de entrada en html. La forma en que lo hago es recuperar texto del backend y generar dinámicamente opciones en la lista de datos, sin embargo, después de recuperar todos los textos en mi interfaz y generar opciones para la lista de datos, solo se muestra una opción en lugar de todas.
Esta es la forma en que agrego la opción a mi lista de datos:
async function getSuggestedWords(event) { let datalist = document.getElementById("suggestions"); let text = document.getElementById("q").value; let http = new XMLHttpRequest(); http.responseType = "json"; // let str = ""; http.onload = async function() { if (this.readyState == 4) { let {suggestions} = http.response; for (let suggest of suggestions) { console.log(suggest.term); let s = document.createElement('option'); s.setAttribute("value", suggest.term); datalist.appendChild(s); } } } const url = `http://localhost:8080/api/suggest?q=${text}`; await http.open("GET", url); await http.send(); }aquí está mi html:
<label for="q">Input</label> <input type="text" name="q" id="q" list="suggestions" onchange="getSuggestedWords(event)" autocomplete="on"> <datalist id="suggestions"> </datalist>En realidad, no necesitas js para hacer esto. Por ejemplo, estoy usando la plantilla jinja 2 aquí para completar mi lista de opciones.
{% for item in db.subkeys %}<option>{{item}}</option>{% endfor %}Donde estoy pasando db.subkeys como lista de cadenas.
Puedes usar el prototipo .map
datalist.innerHTML = suggestions.map((suggest, index) => { return `<option value="${index}">${suggest.term}</option>` })