如何实现搜索输入框为空时隐藏搜索结果？

嘿，我看了你的代码，其实要实现输入框为空时隐藏结果的需求，只需要在search函数里加个空值判断，再调整下计数逻辑就搞定啦！

当前你的代码在输入框为空时执行搜索，空字符串的正则会匹配所有内容，导致所有卡片都显示出来，这和你想要的“清空后隐藏结果”不符。我们可以这么改：

修改后的完整JS代码 #

$(function() {  
    $('.stores-search-not-found').hide();
    $(".stores-input-search").on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault();
            const filter = $(this).val();
            search(filter);
        }
    });
    $('#cta-search-button').on('click', function (e) {
        const filter = $('#stores-input-search').val();
        search(filter);
    })
});

function search(filter){    
    // 先处理空值情况：去掉前后空格后为空，直接回到初始隐藏状态
    const trimmedFilter = filter.trim();
    if (!trimmedFilter) {
        $('.stores-search-lists .card').hide();
        $('.stores-search-not-found').hide();
        return;
    }

    var count = 0;
    $('.stores-search-lists .card').each(function() {
        if ($(this).text().search(new RegExp(trimmedFilter, "i")) < 0) {
            $(this).hide(); 
        } else {
            $(this).show(); 
            count++;
        }
    });  

    // 循环结束后再判断是否显示未找到提示
    if (count === 0) {
        $('.stores-search-not-found').show();
    } else {
        $('.stores-search-not-found').hide();
    }
}

关键修改点说明 #

1. 空值判断：在search函数最开头，先把filter去掉前后空格，判断如果为空，就直接隐藏所有卡片和“未找到”提示，然后终止函数执行，回到初始状态。
2. 修正计数逻辑：原代码里的count判断逻辑有点混乱，现在改成循环结束后统一根据count的值来决定是否显示“未找到”提示，这样逻辑更清晰，也避免了循环里重复判断的问题。
3. 使用trimmedFilter：把去掉空格后的filter用于正则匹配，避免用户输入全空格时误触发搜索。

测试场景验证 #

• 输入“Social”按回车/点击按钮：只会显示包含“Social”的卡片，隐藏其他。
• 清空输入框按回车/点击按钮：所有卡片隐藏，回到初始加载的状态。
• 输入不存在的关键词（比如“xxx”）：所有卡片隐藏，显示“未找到”提示。

你的CSS默认设置已经是正确的（.card默认display: none），所以不用修改CSS部分哦~

备注：内容来源于stack exchange，提问作者clarkf