Vamos a crear paso a paso un filtro de búsqueda con JavaScript. La intención es compartir el código con explicaciones debajo para que puedas copiarlo e ir probando el proyecto en tu propio editor de código.
Antes de comenzar te dejo el video de este articulo.
No te olvides de suscribirte a mi canal, subo contenido de programación regularmente.
1 - Armando la estructura HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Document</title>
</head>
<body>
<div class="search-container">
<input type="text" id="searchInput" placeholder="buscar país" />
<ul id="resultsList" class="results-list"></ul>
<p id="noResults" class="no-results">No se encontraron resultados.</p>
</div>
<script src="app.js"></script>
</body>
</html>
En el HTML tenemos únicamente un contenedor, dentro de el colocamos un en donde el usuario va a escribir lo que desea buscar y una etiqueta <ul>, en donde luego le vamos a insertar etiquetas <li>. Armando de esta forma una lista con los resultados de la búsqueda del usuario.
Por ultimo, tenemos una etiqueta <p> a esta etiqueta la vamos a mostrar únicamente si no hay resultados que mostrarle al usuario.
Cada una de estas etiquetas tiene una clase para darle estilos y un ID para asignarle funcionalidad en un futuro con javascript.
2 - Aplicando estilos CSS
.search-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
}
.results-list {
margin-top: 10px;
padding-left: 0;
list-style-type: none;
text-align: center;
font-size: 22px;
}
.results-list li {
padding: 8px;
border-radius: 4px;
margin-bottom: 4px;
cursor: pointer;
}
.no-results {
font-size: 20px;
color: #666;
text-align: center;
display: none;
}
Aplicamos unos simples estilos a las clases de nuestra estructura HTML para dejar el contenido ordenado, estilamos también las futuras etiquetas <li> que vamos a incluir con javascript con los resultados para mostrarle al usuario y una clase no-results, que en el fututo representará el estilo de un mensaje de aviso en el caso que no se encuentren resultados.
3 - Funcionalidad con Javascript
const countries = [
{ name: "Argentina" },
{ name: "Bolivia" },
{ name: "Brasil" },
{ name: "Chile" },
{ name: "Colombia" },
{ name: "Ecuandor" },
{ name: "Mexico" },
{ name: "Panama" },
{ name: "Paraguay" },
{ name: "Peru" },
{ name: "Uruguay" },
{ name: "Venezuela" },
];
const searchInput = document.getElementById("searchInput");
const resultList = document.getElementById("resultsList");
const noResults = document.getElementById("noResults");
const handleSearch = () => {
const searchTerm = searchInput.value.toLowerCase();
const filteredCountries = countries.filter((country) => country.name.toLowerCase().startsWith(searchTerm));
resultList.innerHTML = "";
if (filteredCountries.length === 0) {
noResults.style.display = "block";
} else {
filteredCountries.forEach((country) => {
const li = document.createElement("li");
li.textContent = country.name;
resultList.appendChild(li);
});
noResults.style.display = "none";
}
if (searchInput.value === "") {
resultList.innerHTML = "";
}
};
searchInput.addEventListener("input", handleSearch);
A) Primero listamos los posibles resultados a la búsqueda del usuario, en mi caso son países. Para eso listamos un array de objetos en donde cada uno de esos objetos nos representa un resultado posible para el usuario con su clave y valor.
B) Como segundo paso capturamos los IDs que tenemos en el HTML que corresponden al (de donde vamos a capturar lo que escriba el usuario), al <ul/> (de donde vamos a mostrar la lista de resultados) y al
En donde mostraremos un mensaje en caso de que no se encuentren resultados.
C) Por último armamos la función handleSearch en donde manejamos toda la lógica.
Esto lo divido en varias partes para poder explicarlo mejor paso a paso.
C.1) Lo primero consiste en crear dos constantes que son claves para para funcionalidad de este proyecto:
La Primera ellas (searchTerm) captura el valor de lo que se esta escribiendo en el input, es decir, cada letra que el usuario esta tipeando transformándolas a minúscula (con toLowerCase), para asegurase de mas allá de como escriba el usuario, siempre vamos a evaluar los resultados en minúscula.
La Segunda (filteredCountries) va a ir filtrando todos los nombres del array de objetos países pasados a minúscula (para coincidir con searchTerm) y por ultimo con el método startsWith que se encarga de hacer la filtración de países condicionando que únicamente devuelva aquellos países del array que comiencen con las letras que esta escribiendo el usuario es decir, la constante searchTerm.
C.2) En esta paso con innerHTML nos aseguramos de que el la lista de países comience en blanco.
C.3) En este punto tenemos un If, Else. Dentro del If nos aseguramos que si dentro el array de países filtrados (filteredCountries) no hay países que mostrar, es decir, que no se encontraron resultados que coincidan con la búsqueda del usuario y por por la tanto su extensión en igual 0, entonces se mostrara el <p> para avisar que no se encontraron resultados.
Dentro del Else colocamos el caso contrario, que seria básicamente se encontraron resultados y que hay que mostrarlos. Para ello creamos una etiqueta <li> y dentro de ella agregamos un contenido de texto con el nombre del país a mostrar y colamos esas <li> dentro del <ul>.
Por ultimo nos aseguramos que el
que muestra que no hay resultados quede desactivado.
C.4) Con este ultimo IF nos aseguramos que al ejecutarse nuestra funcionalidad, la etiqueta <ul> con países no se muestre en caso de que el usuario no escriba nada en el <input> o este vacío.
C.5) En este ultimo paso hacemos el llamado a la función handleSearch cuando se ejecute el evento input (es decir, cuando el usuario escriba algo en el <input>)
Bueno, esto fue todo por este articulo, espero que te sirva para crear tu filtro de búsqueda.
Muchas gracias y que la pases bien.
Saludos,
Pablo.
Comentarios
Publicar un comentario