Lista de precios

<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

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *