如何获取数组中的值插入innerHTML实现搜索商品结果渲染

核心错误点 #

• 循环条件设置错误：当前for循环的终止条件为i < filter.length，其中filter为小写后的搜索关键词字符串，其长度为搜索词的字符数，和筛选得到的结果数量无关，循环次数完全不符合渲染需求。
• 渲染数据源选择错误：循环内读取的是全量商品数组objJson的元素，而非你已经过滤得到的匹配结果数组items，即使循环次数正确，也无法渲染搜索结果。
• 匹配逻辑存在漏洞：筛选时仅将搜索词转为小写，未对商品名做小写转换，会因大小写差异导致匹配遗漏。

修复后代码 #

JavaScript代码 #

// 用原生API获取搜索参数，避免多参数、编码场景下的取值错误
const searchParams = new URLSearchParams(window.location.search);
const search = searchParams.get('search') || '';
const filter = search.toLowerCase();

// 筛选匹配结果，同步转小写消除大小写差异影响
const items = objJson.filter(item => item.productName.toLowerCase().includes(filter));

// 获取渲染容器
const listingTable = document.getElementById('products');
let htmlStr = '';

// 遍历筛选结果拼接HTML，一次性赋值减少重绘提升性能
for (let i = 0; i < items.length; i++) {
  htmlStr += items[i].productName;
}

// 可选：无匹配结果时添加提示
if (items.length === 0) {
  htmlStr = '<li>未找到匹配的商品</li>';
}

listingTable.innerHTML = htmlStr;

可选优化点 #

• 目前商品数据直接存储完整HTML字符串，可调整为仅存储商品名称、链接、图片地址等字段，渲染时动态拼接HTML，降低数组存储体积。
• 如果后续分页功能落地，可在筛选后额外做结果切片，再渲染当前页对应内容即可。

内容的提问来源于stack exchange，提问作者PHV