基于API数据的动态搜索栏无响应问题排查求助

核心问题点 #

• 函数名称不匹配：渲染函数rendersrch里调用了不存在的get4srch()，实际定义的获取数据函数是getsrch()，这会直接导致代码报错中断。
• 未触发渲染流程：点击按钮只调用了getsrch()获取数据，但没有调用rendersrch()来把新数据渲染到页面上，所以看不到结果。
• 搜索值获取时机错误：如果str是在函数外部提前定义的，页面加载时就会获取输入框的空值；必须在用户点击搜索时，实时获取输入框的当前值。
• 初始调用函数错误：最后调用的renderchar()不存在，应该调用rendersrch()来初始化页面。

修正后的完整代码 #

HTML部分

<label for="domTextElement">Name: </label>
<input type="text" id="domTextElement" >

<button type="button" onclick="handleSearch()" value="value">
    click me!!
</button>

<!-- 存放卡片的容器 -->
<div class="search"></div>

JavaScript部分

async function getsrch(searchName) {
    // 点击搜索时传入实时搜索值，同时编码参数避免特殊字符问题
    let url = `https://www.urlcontent.com/api/characters?name=${encodeURIComponent(searchName)}`;
    try {
        let res = await fetch(url);
        return await res.json();
    } catch (error) {
        console.log(error);
        return []; // 出错时返回空数组，防止渲染逻辑报错
    }
}

async function rendersrch(users) {
    let html = '';
    // 处理空数据情况
    if (users.length === 0) {
        html = '<p class="text-center mt-4">未找到匹配的角色</p>';
    } else {
        users.forEach(user => {
            let htmlSegment = `
            <div class="col-3 mt-3">
                <div class="card mx-3" style="border-color: #114C38;">
                    <img src="${user.img}" class="card-img img-thumbnail" alt="${user.name}">
                    <div class="card-body">
                        <h5 class="card-title">${user.name}</h5>
                        <a href="CharDetails.html?id=${user.char_id}" class="btn btn-primary float-end">More</a>
                    </div>
                </div>
            </div>
            `;
            html += htmlSegment;
        });
    }

    let container = document.querySelector('.search');
    container.innerHTML = html;
}

// 串联搜索与渲染的核心处理函数
async function handleSearch() {
    // 实时获取输入框的当前值并去除首尾空格
    let str = document.getElementById("domTextElement").value.trim();
    let users = await getsrch(str);
    rendersrch(users);
}

// 页面加载完成后初始化渲染全部角色
window.addEventListener('load', async () => {
    let users = await getsrch(''); // 传入空值获取全部数据
    rendersrch(users);
});

额外优化建议 #

• 给输入框添加防抖处理，设置300ms延迟，避免用户频繁输入时多次发起API请求。
• 可以给搜索按钮添加加载状态，比如点击后按钮文字变为“搜索中...”，请求完成后恢复，提升用户体验。

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