HTML实现Excel数据搜索异常：无法仅展示精确匹配结果

核心问题分析 #

1. DOM选择器错误
   applyFilter函数里的选择器"ClientID-row > a"存在两处问题：

   • 类选择器缺少.前缀，正确写法应为.ClientID-row
   • 实际DOM结构中没有<a>标签，数据行是包含h4和p的div元素

2. 初始状态未隐藏数据
   数据加载完成后直接设置allClientIDsElm.style.display = "block"，导致所有行默认显示，不符合"初始为空"的需求

3. 过滤逻辑不完整

   • 仅设置匹配项显示，未隐藏不匹配的行
   • 未处理输入为空时的状态（应隐藏所有行）
   • 缺少无匹配结果时的提示逻辑

4. 搜索事件未关联过滤函数
   输入框的onkeyup="myFunction()"中，myFunction未定义，导致输入时无法触发过滤

修复后的完整代码 #

1. HTML部分（调整事件绑定与初始隐藏） #

<!DOCTYPE html>
<html>
<head>
    <title> Data </title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="hero">
        <h1>Type in your ID</h1>
        <h3></h3>
    </div>  
    <div id="display">
        <div id="search">
            <input id="searchClientIDs" Name="searchClientIDs" onkeyup="applyFilter(this.value)" placeholder="Search for id" />
        </div>
        <div id="noClientIDFound" style="display:none;">
            <h2> No ID FOUND </h2>
        </div>
        <div id="loader"> 
            <h4> Loading</h4> 
        </div>
        <div id="allClientIDs" style="display:none;">
        </div>
        <div id="errorMessage" style="display:none;"> 
            <h2> Failed to get data. Please refresh </h2>
        </div>
    </div>
</body>
</html>

2. 数据加载JS部分（添加行初始隐藏） #

function setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm){
    loaderElm.style.display = "none"
    allClientIDsElm.style.display = "none"
    errorMessageElm.style.display = "block"
}

let allClientIDsElm = document.getElementById("allClientIDs")
let loaderElm = document.getElementById("loader")
let errorMessageElm = document.getElementById("errorMessage")
let noClientIDFoundElm = document.getElementById("noClientIDFound")
    
fetch("https://api.apispreadsheets.com/data/").then(res=>{
    if (res.status === 200){
        res.json().then(data=>{
            const yourData = data["data"]
            for(let i = 0; i < yourData.length; i++){
                let rowInfo = yourData[i]

                let rowInfoDiv = document.createElement("div")
                rowInfoDiv.classList.add("ClientID-row")
                rowInfoDiv.style.display = "none" // 初始隐藏每一行

                let rowClientID = document.createElement("h4")
                let rowClientIDNode = document.createTextNode(rowInfo["ClientID"])
                rowClientID.appendChild(rowClientIDNode)
                rowClientID.classList.add("ClientID")

                let rowRA = document.createElement("p")
                let rowRANode = document.createTextNode(rowInfo["RA"])
                rowRA.appendChild(rowRANode)
                rowRA.classList.add("RA")

                rowInfoDiv.appendChild(rowClientID)
                rowInfoDiv.appendChild(rowRA)

                allClientIDsElm.appendChild(rowInfoDiv)
            }
            
            loaderElm.style.display = "none"
            allClientIDsElm.style.display = "block" // 显示容器，内部行仍隐藏
            errorMessageElm.style.display = "none"

        }).catch(err => {
            setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm)
        })
    }
    else{
        setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm)
    }
}).catch(err =>{
    setErrorDisplay(loaderElm, allClientIDsElm, errorMessageElm)
})

3. 过滤函数applyFilter修复 #

function applyFilter(userInput){
    let allClientIDRows = document.querySelectorAll(".ClientID-row");
    let inputTrimmed = userInput.trim();
    let matchCount = 0;

    // 先隐藏"未找到"提示
    noClientIDFoundElm.style.display = "none";

    for(let i = 0; i < allClientIDRows.length; i++){
        let row = allClientIDRows[i];
        let clientIDElm = row.getElementsByClassName("ClientID")[0];
        let clientIDText = clientIDElm.textContent.trim();

        if(inputTrimmed === ""){
            // 输入为空时隐藏所有行
            row.style.display = "none";
        } else if(clientIDText === inputTrimmed){
            // 匹配时显示行
            row.style.display = "block";
            matchCount++;
        } else {
            // 不匹配时隐藏行
            row.style.display = "none";
        }
    }

    // 若无匹配项，显示提示
    if(inputTrimmed !== "" && matchCount === 0){
        noClientIDFoundElm.style.display = "block";
    }
}

关键修复点说明 #

• 修正DOM选择器，确保能正确选中数据行
• 数据加载时默认隐藏每一行，实现初始空页面效果
• 完善过滤逻辑：输入为空隐藏所有行，匹配显示、不匹配隐藏，无匹配时显示提示
• 直接将输入框的onkeyup事件绑定到applyFilter函数，传递输入值

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