<h2>Catálogo de Productos</h2>
<input type="text" id="buscador" placeholder="Buscar producto..." style="width:100%; padding:10px; margin-bottom:10px;">
<table border="1" width="100%" id="tabla">
<thead>
<tr>
<th>Código</th>
<th>Descripción</th>
<th>PVF</th>
<th>PVP</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const API_URL = "https://tu-dominio.com/farmacia/api_productos.php";
let productos = [];
fetch(API_URL)
.then(res => res.json())
.then(data => {
productos = data;
mostrarProductos(productos);
});
function mostrarProductos(lista) {
let tbody = document.querySelector("#tabla tbody");
tbody.innerHTML = "";
lista.forEach(p => {
let fila = `
<tr>
<td>${p.codigo_barra}</td>
<td>${p.descripcion}</td>
<td>$ ${p.pvf}</td>
<td>$ ${p.pvp}</td>
</tr>
`;
tbody.innerHTML += fila;
});
}
// 🔎 BUSCADOR
document.getElementById("buscador").addEventListener("keyup", function() {
let texto = this.value.toLowerCase();
let filtrados = productos.filter(p =>
p.descripcion.toLowerCase().includes(texto)
);
mostrarProductos(filtrados);
});
</script>
Deja una respuesta