Estoy creando un input que toma los valores de un array y los compara con el valor del mismo, lo que me gustaria hacer es que en caso de que los resultados empiecen con la misma letra los muestre a partir de un evento on keyup, hasta ahora tengo esto:
let valorBusqueda = document.querySelector('#valor');
let opcBusqueda = document.querySelector('.opc-busqueda');
//Event Listener
valorBusqueda.addEventListener('keyup', keyUpCampo);
//Funciones
function keyUpCampo() {
//Muestra el menu de sugerencias
opcBusqueda.style = "display: flex";
sendToPage();
}
var sendToPage = function () {
//Get the input value by finding the element by its ID
let busqueda = document.getElementById('valor').value;
//Check if the value is in the array
var sugerencias = ['marvel', 'futbol','goku ssj','falafel','robocop', 'rick', 'morty', 'x-men', 'starwars', 'goku', 'bulma', 'vegeta', 'simpsons', 'homer', 'cartoon'];
for (k in sugerencias) {
if (busqueda.includes(sugerencias[k])) {
let input = document.createElement("INPUT");
input.setAttribute('type','button');
input.setAttribute('value',`${sugerencias[k]}`)
opcBusqueda.appendChild(input)
}
}
}
<body>
<div class="busqueda">
<div class="inputs">
<input id="valor" type="text" placeholder=" Busca hashgtags, temas, busca lo que quieras.."></div>
</div>
<div class="opc-busqueda" style="display: none;"></div>
</body>
Saludos