JavaScript实时搜索无匹配结果时如何显示「未找到结果」提示？

实现方案 #

第一步：修改HTML结构，增加空结果提示容器 #

在#facstaff-data所有列表项的末尾添加提示元素，默认隐藏：

<div class="facstaffsearchbar">
    <input type="text"
           id="facstaff-search"
           name="facstaff-search"
           rel="facstaff-search"
           placeholder="🔍 Search for a donor on this list . . ."
    />
    <div rel="facstaff-data" id="facstaff-data">
        <div class="facstaff-data-item">+Terry Laughlin KGSB ’81 & Regina L. Aldisert<span style="display:none!important;"></span></div>
        <div class="facstaff-data-item">+Dr. W. Harry Archer, DEN ’27, A&S ’37 & +Mrs. Louise E. Archer, A&S ’27<span style="display:none!important;"></span></div>
        <div class="facstaff-data-item">+Lauren H. Ashe, A&S ’14<span style="display:none!important;"></span></div>
        <div class="facstaff-data-item">+William R. Baierl, EDUC ’51<span style="display:none!important;">Bill, Willy</span></div>
        <div class="facstaff-data-item">Bettye J. Bailey, CGS ’84 & +Ralph E. Bailey<span style="display:none!important;"></span></div>
        <!-- 新增无结果提示 -->
        <div class="no-result-tip" style="display:none;color:#666;padding:10px 0;">抱歉，未找到相关结果</div>
    </div>
</div>

第二步：修改JS逻辑，增加匹配统计和提示控制 #

改写后的JS完全适配你原有过滤逻辑，改动量最小：

const searchInput = document.querySelector('input[rel="facstaff-search"]');
const noResultTip = document.querySelector('.no-result-tip');

searchInput.addEventListener('input', function (event) {
    const input = event.target;  
    const query = input.value.trim().toLowerCase();
    const results = input.parentNode; 
    const data = results.querySelectorAll(".facstaff-data-item");
    let matchCount = 0; // 统计匹配到的条目数量

    if (query) {
        for (let i = 0, len = data.length; i < len; i++) {
            const isMatch = data[i].innerHTML.toLowerCase().includes(query);
            if (isMatch) {
                matchCount++;
                data[i].style.display = 'block';
            } else {
                data[i].style.display = 'none';
            }
        }
        // 匹配数为0时显示提示，否则隐藏
        noResultTip.style.display = matchCount === 0 ? 'block' : 'none';
    } else {
        // 输入为空时恢复所有条目、隐藏提示
        for (let i = 0, len = data.length; i < len; i++) {
            data[i].style.display = 'block';
        }
        noResultTip.style.display = 'none';
    }
});

优化说明 #

• 提前对输入内容做去空格、转小写处理，减少循环内重复计算，性能更优
• 保留了你原有匹配隐藏span内别名的逻辑，不影响原有搜索范围
• 输入为空时自动隐藏无结果提示，符合常规交互逻辑

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