jQuery实现输入框单词分别匹配div属性的搜索需求

我来帮你搞定这个功能，先梳理下现有代码里的几个小问题，再给你完整的解决方案：

现有代码的问题 #

• 选择器错误：你写的$("filterSearch")没加类选择器的.，应该是$('.filterSearch')才能选中带这个类的div
• 属性获取有误：你提到的attr('da...应该是attr('data-tags')，不过用jQuery的data()方法会更方便
• 缺少单词拆分和逐个匹配的逻辑：需要把输入内容拆成单个单词，再检查每个单词是否存在于data-tags中

完整修正后的代码 #

function filter() {
    // 处理输入内容：转小写、去除首尾空格、拆分成单词数组（过滤空字符串）
    var searchText = $('#searchInput').val().toLowerCase().trim();
    var searchWords = searchText ? searchText.split(/\s+/).filter(word => word.length > 0) : [];

    // 遍历所有目标div
    $('.filterSearch').each(function() {
        const $div = $(this);
        // 获取data-tags的值并转小写，方便不区分大小写匹配
        const tags = $div.data('tags').toLowerCase();
        
        // 检查所有搜索单词是否都存在于tags中
        // 如果想要「任意一个单词匹配就显示」，把every换成some即可
        const isMatch = searchWords.every(word => tags.includes(word));
        
        // 根据匹配结果切换元素显示/隐藏
        $div.toggle(isMatch);
    });
}

关键细节说明 #

• 单词拆分：用split(/\s+/)可以处理输入多个空格的情况，filter(word => word.length > 0)避免输入全空格时产生空字符串的问题
• 匹配逻辑：
  • every()：要求所有搜索单词都在data-tags中存在才显示元素（适合精确匹配多个关键词）
  • some()：只要有一个单词匹配就显示元素（适合模糊搜索）
• 属性获取：$div.data('tags')会自动读取data-tags属性的值，比attr('data-tags')更简洁，而且jQuery会自动处理属性的格式转换
• 空输入处理：当输入框为空时，searchWords是空数组，every()会返回true，所有div都会显示，符合预期

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