agent_test/template/javascript/product_list.html

<script>
    function _get_list_category() {
        return {
            "list_product": [
                {
                    'id': 2105,
                    'title': 'Máy in mã vạch MH241',
                    'request_path': '/may-in-ma-vach-mh241',
                    'price': 0,
                    'market_price': 0,
                    'quantity': 1,
                    'image': {
                        'thumb': 'http://hura8.hurasoft.com/media/product/t-2105-2105_10_1.jpg',
                        'small': 'http://hura8.hurasoft.com/media/product/s-2105-2105_10_1.jpg',
                        'large': 'http://hura8.hurasoft.com/media/product/l-2105-2105_10_1.jpg',
                        'original': 'http://hura8.hurasoft.com/media/product/2105-2105_10_1.jpg',
                    }

                },
                {
                    'id': 2104,
                    'title': '[Mới 100%] Dell Gaming G16 7620 (Intel core i7-12700H, 16GB, 1TB, RTX 3060 6GB, 16″ QHD+ 165Hz IPS)',
                    'request_path': '/acer-gaming-predator-helios-neo-16-2023',
                    'price': 28500000,
                    'market_price': 0,
                    'quantity': 1,
                    'image':
                    {
                        'thumb': 'http://hura8.hurasoft.com/media/product/t-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
                        'small': 'http://hura8.hurasoft.com/media/product/s-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
                        'large': 'http://hura8.hurasoft.com/media/product/l-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
                        'original': 'http://hura8.hurasoft.com/media/product/2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
                    }

                },
                {
                    'id': 2100,
                    'title': 'Chăn hè đũi xơ đậu nành mã 32 Gấu xanh',
                    'request_path': '/chan-he-dui-xo-dau-nanh-ma-32-gau-xanh',
                    'price': 220000,
                    'market_price': 340000,
                    'quantity': 1,
                    'image':
                    {
                        'thumb': 'http://hura8.hurasoft.com/media/product/t-2100-2100_8640_m32___g___u_xanh.jpg',
                        'small': 'http://hura8.hurasoft.com/media/product/s-2100-2100_8640_m32___g___u_xanh.jpg',
                        'large': 'http://hura8.hurasoft.com/media/product/l-2100-2100_8640_m32___g___u_xanh.jpg',
                        'original': 'http://hura8.hurasoft.com/media/product/2100-2100_8640_m32___g___u_xanh.jpg',
                    }

                },
                {
                    'id': 2098,
                    'title': 'Chăn hè đũi xơ đậu nành mã 35 Tròn chấm pi',
                    'request_path': '/bo-ga-goi-chun-chan-xo-dau-nanh-ma-36-tho-cherry-1',
                    'price': 225000,
                    'market_price': 350000,
                    'quantity': 1,
                    'image':
                    {
                        'thumb': 'http://hura8.hurasoft.com/media/product/t-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
                        'small': 'http://hura8.hurasoft.com/media/product/s-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
                        'large': 'http://hura8.hurasoft.com/media/product/l-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
                        'original': 'http://hura8.hurasoft.com/media/product/2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
                    }

                },
                {
                    'id': 2097,
                    'title': 'Bộ ga gối chun chần xơ đậu nành mã 36 Thỏ Cherry',
                    'request_path': '/bo-ga-goi-chun-chan-xo-dau-nanh-ma-36-tho-cherry',
                    'price': 280000,
                    'market_price': 350000,
                    'quantity': 1,
                    'image':
                    {
                        'thumb': 'http://hura8.hurasoft.com/media/product/t-2097-2097_8695_m36___th____cherry.jpg',
                        'small': 'http://hura8.hurasoft.com/media/product/s-2097-2097_8695_m36___th____cherry.jpg',
                        'large': 'http://hura8.hurasoft.com/media/product/l-2097-2097_8695_m36___th____cherry.jpg',
                        'original': ' http://hura8.hurasoft.com/media/product/2097-2097_8695_m36___th____cherry.jpg',
                    }

                }
            ]
        }
    }

    function displayProductList(products) {
        var productListElement = $("#js-show-search");
        var html = '';

        $.each(products, function (index, product) {
            var price = product.price
            if (price > 0) {
                price = `<span class="price">` + formatCurrency(price) + ` đ</span>`;
            } else {
                price = '<span class="price">0</span>';
            }

            html += `
                    <a href="`+ product.request_path + `" class="flex items-center justify-between item">
                        <span class="info">
                            <span class="name">`+ product.title + `</span>
                            `+ price + `
                        </span>
                        <img src="`+ product.image.thumb + `" alt="` + product.title + `">
                    </a>
                `;
        });

        productListElement.html(html);
    }

    function searchProduct() {
        var searchTerm = $("#js-input-search").val().toLowerCase();
        var allProducts = _get_list_category().list_product;

        // Filter products based on the search term
        var filteredProducts = $.grep(allProducts, function (product) {
            return product.title.toLowerCase().includes(searchTerm);
        });

        // Display the filtered products
        displayProductList(filteredProducts);

        if (filteredProducts.length > 0 && searchTerm !== "") {
            $("#js-show-search").show();
            displayProductList(filteredProducts);
        } else {
            $("#js-show-search").hide();
        }
    }

    $(document).ready(function () {
        $("#js-input-search").on("input", searchProduct);
    })
</script>