JavaScript搜索功能失效问题排查与修复求助

在JavaScript代码中实现搜索功能时遇到异常：在搜索输入框中输入内容时，搜索结果无法正确更新。以下是相关代码：

let productContainer = document.querySelector('.product-container')
let arr_1 = [];
let arr_2 = [];
let search = document.querySelector('#search')
function getDataJson() {
    fetch(`http://localhost:3000/services`)
        .then(response => response.json())
        .then(data => {
            arr_2 = data;
            productContainer.innerHTML = "";
            arr_1 = arr_1.length || search.value ? arr_1 : data;
            arr_1.forEach(element => {
                productContainer.innerHTML += `
            <div class="product-image"><img src="${element.images}" alt=""></div>
            <h2>${element.title}</h2>
      
            `
            });
        })
}
getDataJson()
search.addEventListener("input", (e) => {
    arr_1 = arr_2;
    arr_1 = arr_1.filter((el) => {
        return el.title.toLowerCase().includes(e.target.value.toLowerCase())
    });
    getDataJson();
})

问题成因分析 #

• 搜索输入事件中修改arr_1后，又调用getDataJson()发起新请求，该请求会覆盖原始数据存储数组arr_2，同时arr_1 = arr_1.length || search.value ? arr_1 : data的逻辑判断存在错误：当arr_1为空数组时arr_1.length为0（假值），但search.value非空时为真值，会导致arr_1被错误赋值为自身，最终过滤逻辑完全失效。
• 每次输入都重复发起网络请求，既浪费资源，还会因为异步请求的时序问题，出现旧请求的响应覆盖新搜索结果的情况。
• arr_1 = arr_2是引用赋值，后续过滤操作会直接修改原数组arr_2，导致原始全量数据丢失，无法进行后续的正确过滤。

排查与修复方案 #

排查步骤 #

1. 在search的input事件和getDataJson()的回调中添加console.log，打印arr_1、arr_2和search.value的实时值，确认数据流向是否符合预期。
2. 观察网络请求的发起顺序和响应顺序，确认是否存在旧请求覆盖新结果的时序问题。

修复代码 #

let productContainer = document.querySelector('.product-container')
let originalData = []; // 存储原始全量数据
let search = document.querySelector('#search')

// 仅用于初始化获取数据
function fetchData() {
    fetch(`http://localhost:3000/services`)
        .then(response => response.json())
        .then(data => {
            originalData = data;
            renderProducts(data); // 初始化渲染全量数据
        })
}

// 专门负责渲染商品的函数
function renderProducts(products) {
    productContainer.innerHTML = "";
    products.forEach(element => {
        productContainer.innerHTML += `
            <div class="product-image"><img src="${element.images}" alt=""></div>
            <h2>${element.title}</h2>
        `;
    });
}

fetchData()

search.addEventListener("input", (e) => {
    const keyword = e.target.value.toLowerCase().trim();
    // 根据关键词过滤原始数据
    const filteredData = keyword 
        ? originalData.filter(el => el.title.toLowerCase().includes(keyword))
        : originalData;
    // 直接渲染过滤后的结果，无需重新请求
    renderProducts(filteredData);
})

修复要点 #

• 分离数据获取和渲染逻辑：fetchData()仅执行一次初始化数据获取，renderProducts()负责根据传入的数据渲染页面，职责划分更清晰。
• 保留原始数据：用originalData存储全量数据，每次搜索都基于原始数据进行过滤，避免原始数据丢失。
• 输入事件中直接过滤渲染：不再发起重复网络请求，提升性能的同时避免异步时序问题。
• 优化关键词处理：添加trim()去除首尾空格，避免无意义空格导致的过滤异常。

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