Llevo poco tiempo aprendiendo Javascript y para poder asimilar los conocimientos que estoy adquiriendo, estoy realizando un proyecto de un e-commerce. Quiero crear un filtro de búsqueda desde un input, para que me muestre solo los productos que el usuario quiera, esto lo quiero leer desde un archivo .Json que tiene todos los productos.
Les muestro solo una parte del archivo Json:
[
{
"id": 1,
"title": "Intel Core i5 11400",
"price": 28190,
"imageUrl": "../images/productos/procesadores/intel-2.jpg",
"description": "Socket 1200 11th Gen Rocket Lake"
},
{
"id": 2,
"title": "Intel Core i5 11400F",
"price": 22210,
"imageUrl": "../images/productos/procesadores/intel-1.jpg",
"description": "Socket 1200 11th Gen Rocket Lake"
},
{
"id": 3,
"title": " Intel Core i5 11600KF",
"price": 33650,
"imageUrl": "../images/productos/procesadores/intel-2.jpg",
"description": "Socket 1200 11th Gen Rocket Lake"
},
{
"id": 4,
"title": "Intel Core i5 12400",
"price": 37068,
"imageUrl": "../images/productos/procesadores/intel-6.jpg",
"description": "Socket 1700 12th Gen"
},
{
"id": 5,
"title": "Intel Core i7 11700K",
"price": 55009,
"imageUrl": "../images/productos/procesadores/intel-3.jpg",
"description": "Socket 1200 11th Gen Rocket Lake"
}]
Esto lo llame a Js mediante un fetch:
const fetchData = async() => {
try{
const res = await fetch("./productos.json");
const data = await res.json();
// console.log(data);
mostrarProductos(data);
detectarBotones(data);
} catch(error){
console.log(error);
}
}
Lo que quiero saber, es como puedo hacer para que cada vez que el usuario busque algo, aparezcan solo esos productos en pantalla. Si hay algún tutorial que puedan recomendarme si es muy larga la explicación o si tienen paciencia para explicarme, les estaría agradecido, gracias por leerme.