搜索并匹配两个单独的 html-tags 值和 hide/show 匹配的 div

Question

根据此处之前的讨论：dynamically show/hide div based on the input of textbox

我有一个搜索输入，shows/hides div根据输入匹配h4s。如果有一个值为 Apple 的 h4，将显示具有该 h4 值的 .hs_cos_wrapper_widget div，并隐藏其他值。

$('#search').keyup(function() {
    var value = $(this).val();
    var exp = new RegExp('^' + value, 'i');

    $('.product-listing__block--wrapper .hs_cos_wrapper_widget').each(function() {
        var isMatch = exp.test($('h4', this).text()); 
        $(this).toggle(isMatch);
    });
});

效果很好，符合预期。但是，我也试图让它搜索标签（位于 h4 下方的 div 中，带有 class .tags）

我在搜索两者时遇到了问题。其中一项尝试是将包装 div “.info” 中的内容与 h4 和内部标签进行匹配。但是没有运气

Answer 1

使用此处讨论的不同方法解决了问题：Show divs based on text search 通过搜索所有基础内容而不是特定标签。

下面的工作示例（根据上面链接讨论中@dku.rajkumar 的代码略作修改）

$('#search_download').keyup(function(){
    $('.hs_cos_wrapper_widget').hide();
    var txt = $('#search_download').val();
    $('.hs_cos_wrapper_widget').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});

因此，当文本输入与这些 div 中的任何文本匹配时，上面的代码会使用输入字段下方的 class .hs_cos_wrapper_widget 过滤 div。

搜索并匹配两个单独的 html-tags 值和 hide/show 匹配的 div

Searching and matching two seperate html-tags values and hide/show matching divs

search

jquery

input

show

hide