Layui 2.9.2 列表商品展示页 用模板引擎 laytpl Ajax 读取json 数据 筛选数组 filter css 限制文体显示过长用。。。代替

在LaUI 2.9.2中，使用laytpl模板引擎结合Ajax读取JSON数据并筛选数组，可以通过以下步骤实现：

1. 准备HTML结构，包括用于显示商品列表的容器和用于筛选的元素。
2. 使用laytpl模板引擎来渲染商品列表。
3. 使用Ajax从服务器获取JSON数据。
4. 对获取到的数据进行筛选，使用JavaScript数组的filter方法。
5. 再次使用laytpl模板引擎来更新商品列表。

以下是实现上述功能的示例代码：

HTML:

<div class="goods-list"></div> <!-- 商品列表容器 -->
<input type="text" id="filterInput" placeholder="输入筛选关键词" />

JavaScript:

layui.use(['laytpl', 'jquery'], function(){
    var laytpl = layui.laytpl;
    var $ = layui.jquery;
 
    // 模拟Ajax获取数据
    $.ajax({
        url: 'your-json-data-url', // 替换为你的JSON数据URL
        dataType: 'json',
        success: function(data) {
            // 假设data是从服务器获取的JSON数据
            var filterKeyword = $('#filterInput').val(); // 获取筛选关键词
 
            // 筛选数组
            var filteredItems = data.filter(function(item){
                return item.name.includes(filterKeyword); // 假设根据商品名称筛选
            });
 
            // 渲染商品列表
            laytpl($('#goodsListTpl').html()).render(filteredItems, function(html){
                $('.goods-list').html(html);
            });
        }
    });
});

模板(laytpl)部分：

<script type="text/html" id="goodsListTpl">
    {{# layui.each(d, function(index, item){ }}
        <div class="goods-item">{{ item.name }} - ￥{{ item.price }}</div>
    {{# }); }}
</script>

确保替换your-json-data-url为实际提供JSON数据的服务器地址。以上代码假设JSON数据中包含商品的name和price属性，并且筛选逻辑是根据商品名称进行的。在实际应用中，你需要根据实际数据结构和筛选逻辑进行调整。