Vamos a crear en este articulo un buscador y filtrado de productos en JavaScript paso a paso.
Te voy a ir dejando el código limpio para que puedas copiarlo y probarlo en tu proyecto junto con explicaciones.
Te dejo también el video de este tutorial por si te interesa tenerlo a mano.
Como crear un BUSCADOR DE PRODUCTOS en JAVASCRIPT | FILTRO DE BUSQUEDA en tiempo real - YouTube
En este video creamos un buscador de productos haciendo la funcionalidad de un filtro de búsqueda en JavaScript.Acá una nota en mi blog con el código y algun...
youtube.com
¡No te olvides de suscribirte a mi canal! ♥️.
1) El HTML del buscador del productos en javaScript
<!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>
<h1>BUSCAR PRODUCTOS</h1>
<!-- search content -->
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search products..." />
</div>
<p id="noResults" class="no-results">No se encontraron resultados.</p>
<!-- shop content -->
<div class="card-products-container">
<div id="shopContent"></div>
</div>
<script src="app.js"></script>
</body>
</html>
En este HTML se encuentra únicamente un <input> en donde el usuario va a escribir el producto que desea buscar junto con una etiqueta <p>, la cual contendrá un texto que se va a mostrar únicamente en caso de que no se encuentren resultados para mostrar.
Por ultimo, se encuentra un <div> que será el contenedor de los productos.
Cada una de estas etiquetas tienen clases y id´s que son necesarios tanto para estilos como para la funcionalidad y dinamismo que se les dará en un futuro con JavaScript.
2) Estilos de la barra de búsqueda y de los productos
h1 {
text-align: center;
}
.search-container {
max-width: 400px;
margin: 0vh auto;
padding: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #646363;
border-radius: 8px;
outline: none;
}
.card-products-container {
margin: 10vh auto;
text-align: center;
}
.card-products {
display: inline-block;
text-align: center;
margin: 0 30px;
}
.card-products img {
height: 180px;
}
.card-products h3,
.card-products .price {
margin-top: 10px;
}
.card-products button {
border: none;
outline: 0;
padding: 10px;
color: white;
background-color: #1bcb7f;
text-align: center;
cursor: pointer;
width: 80%;
font-size: 15px;
}
.no-results {
font-size: 20px;
color: red;
text-align: center;
display: none;
}
Te dejo los estilos, efectivamente solo hacen a la estética del proyecto. Lo único a tener en cuenta en relación a la funcionalidad es el "display:none" que se encuentra en la clase ".no-results", esto vendría a ser que el párrafo no se muestre por default en la pagina web. El dinamismo de mostrarse cuándo sea necesario se lo vamos a dar en el JavaScript.
3) Código JavaScript para ver, filtrar y buscar productos
const products = [
{
productName: "Sandia",
price: 15,
img: "https://res.cloudinary.com/pabcode/image/upload/v1699869750/e-commerce/ksmw5s3xg7eeakpva5xd.png",
},
{
productName: "Cervecita",
price: 20,
img: "https://res.cloudinary.com/pabcode/image/upload/v1699869747/e-commerce/xhlekqrockwxzjskzppw.png",
},
{
productName: "Bananita",
price: 30,
img: "https://res.cloudinary.com/pabcode/image/upload/v1699871193/e-commerce/mopgcvdiepr8axkazmcp.png",
},
{
productName: "Compu",
price: 40,
img: "https://res.cloudinary.com/pabcode/image/upload/v1700045911/e-commerce/compu_unvcoi.png",
},
];
const shopContent = document.getElementById("shopContent");
const searchInput = document.getElementById("searchInput");
const noResults = document.getElementById("noResults");
const displayProducts = (productList) => {
shopContent.innerHTML = "";
if (productList.length === 0) {
noResults.style.display = "block";
} else {
productList.forEach((product) => {
const content = document.createElement("div");
content.className = "card-products";
content.innerHTML = `
<img src="${product.img}">
<h3>${product.productName}</h3>
<p class="price">${product.price}</p>
<button>comprar</button>
`;
shopContent.append(content);
});
noResults.style.display = "none";
}
};
const handleSearch = () => {
const searchTerm = searchInput.value.toLowerCase();
const filteredProducts = products.filter((product) => product.productName.toLowerCase().startsWith(searchTerm));
displayProducts(filteredProducts);
};
displayProducts(products);
searchInput.addEventListener("input", handleSearch);
Por ultimo tenemos el JavaScript, vayamos viendo paso a paso que es lo que hace.
1) Lo primero es tener listados nuestros productos, en mi caso tengo un array de objetos, cada producto tienen un nombre, precio e imagen.
2) Lo siguiente es capturar mediante sus id las etiquetas que están en HTML y que necesitamos para lograr el dinamismo y la funcionalidad.
3) Es momento de comenzar a armar la función que va a desplegar los productos, en este caso se llama displayProducts().Vamos viendo paso a paso que es lo que hace esta función.
a) Lo primero es notar que la función tiene como parámetro productList. Este parámetro representa dos cosas distintas según lo que le pasamos al momento de invocar la función. Puede ser el array de productos en si mismo o puede ser también los productos que han sido filtrados y que debemos mostrarle a usuario como resultados de su búsqueda.
b) Como primera linea dentro de la función nos aseguramos que el shopContent este limpio cada vez que se ejecute la función. Esto lo hacemos para asegurarnos que los productos no aparezcan duplicados mientras vamos ejecutando la funcionalidad de nuestro programa.
c) Lo siguiente es un if(), else(). Dentro del if() tenemos únicamente un "display:block" al párrafo que muestra que no se encontraron resultados en caso de que se cumpla la condición tener al producList con una extensión de 0.
Dentro del else() simplemente recorremos los productos filtrados con un forEach y armamos las cards con lo productos para mostrar en el sitio web, además anulamos con un "display:none" el párrafo que muestra que no hay resultados para asegurarnos de que no se muestre.
4) Es ahora el turno de la segunda función del proyecto handleSeach(), esta funcion es la que hace todo el proceso de filtrado y busqueda, veamos que es lo que hace.
a) En la primer variable SearchTerm capturamos las letras que escribe el usuario en el input y las transformamos a minúscula, esto último para asegurarnos de que mas allá de como escriba el usuario en el input siempre vamos a procesar toda la lógica con las letras en minúscula para que no se nos generen conflictos.
b) La segunda variable filteredProducts lo que hace es filtrar todos los nombres del array "products" pasados a minúscula (para coincidir con searchTerm). Luego con el método startsWith se asegura que únicamente devuelva aquellos productos del array que comiencen con las letras que esta escribiendo el usuario, es decir, la constante searchTerm.
Esta ultima variable es fundamental, ya que contiene dentro de si todos los productos filtrados.
c) Lo siguiente es llamar a la primer función que creamos en este proyecto pasándole por parámetro los países filtrados, es decir la variable filteredProducts.
5) Luego tenemos simplemente la invocación del la función displayproducts() para mostrar los productos inicialmente al cargar la pagina.
6) Lo ultimo es simplemente ejecutar la función handleSearch() cuando se ejecute el evento input, es decir, cuando el usuario comience a tipear para buscar algún producto en la barra de búsqueda.
Perfecto, espero que te sirva! Esto es todo para lograr el buscador de productos con JavaScript
Saludos,
Pablo.
Top comments (0)