Estoy realizando un ejercicio de aprendizaque que consiste en un buscador que muestre las sugerencias según vamos escribiendo. En su lugar muestra una línea que parece ser la linea superior del bloque que se deberia desplegar hacia abajo, pero nada aparece (foto1).
He revisado varias veces el ejercico y lo tengo coma por coma igual que el ejemplo.
La hoja de estilos también está calcada y revisada.
He probado en otros browsers, mozilla y chrome me dan el resultado de la imagen, sin embargo brave me ajusta la linea negra a la longitud del cuadro de texto.
Dejo el codigo en JS y la hoja de estilos por si, aún habiéndolo repasado, estoy pasando algo por alto, o por si os ocurre lo mismo.
Main.js :
//simulacion de una bd con un objeto, para que nos devuelva resultados
const db = [
'luis',
'maria',
'sergio',
'ainoa',
'roman'
];
//ref a elemento
const buscador = document.querySelector('#buscador');
const sugerencias = document.querySelector('#sugerencias');
//evento input
buscador.addEventListener('input', e => {
//constante query
const q = e.target.value.toLowerCase().trim;
//si no escribimos nada no muestra nada
if (q == '') mostrarSugerencias([], q);
//en una variable guardamos un filtrado del objeto db. Si lo que escribimos coincide con algo del db
//devuelve el item, que es un array de caracteres
//la coincidencia se hace con if. si 'q' coincide con item, sus indices coincidiran y seran >-1
const res = db.filter(item => {
if (item.indexOf(q) > -1) return item;
});
//muestra sugerencia
mostrarSugerencias(res, q);
});
//le pasamos los valores que son las sugerencias y la query como tal
function mostrarSugerencias(valores, q) {
//borra contenido previo
sugerencias.innerHTML = '';
//valida, si no existe q, no se muestra sugerencia, de lo contrario, si
if (q == '') {
sugerencias.style.display = 'none';
return false;
} else {
sugerencias.style.display = 'block';
}
//itera entre los elementos del objeto db para mostrar todos los que vayan
//coincidiendo y crear el elemento html con su formato
valores.forEach(valor => {
const elemento = document.createElement('a');
elemento.href = '#';
let texto = valor.replace(q, `<strong>${q}</strong>`);
elemento.innerHTML = texto;
sugerencias.appendChild(elemento);
elemento.addEventListener('click', e => {
buscador.value = e.target.textContent;
sugerencias.innerHTML = '';
sugerencias.style.display = 'block';
});
});
}
Hoja de estilos:
body{
font-family: Arial, Helvetica, sans-serif;
}
#buscador-container{
width: 500px;
margin: 100px;
}
#buscador{
font-size: 28px;
padding: 10px 15px;
}
#sugerencias{
border: solid 1px black;
width: 375px;
display: none;
position: absolute;
}
#sugerencias a{
display: block;
padding: 10px;
text-decoration: none;
color: #aaa;
}
#sugerencias a:hover{
background-color: #003366;
color: white;
}
#sugerencias strong{
color: black;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscador</title>
<link rel="stylesheet" href="./style.css" type="text/css" media="all" />
</head>
<body>
<div id="buscador-container">
<input type="text" id="buscador">
<div id="sugerencias">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
ps: siento los comentarios amateur, acepto criticas constructivas sobre como comentar mejor.