代码之家 › 专栏 › 技术社区 › knutagard

搜索和匹配两个单独的html标记值并隐藏/显示匹配的div

show hide input search jquery

0

knutagard · 技术社区 · 7 年前

根据前面的讨论: dynamically show/hide div based on the input of textbox

我有一个搜索输入,根据输入显示/隐藏下面的div,匹配h4s。如果有一个值为Apple的h4,则。将显示具有该h4值的hs\u cos\u wrapper\u小部件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以及其中的标签进行匹配。但运气不好

1 回复 | 直到 7 年前

1

knutagard 7 年前

使用此处讨论的不同方法解决的问题: 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。当文本输入与这些div中的任何文本匹配时,输入字段下方的hs\u cos\u wrapper\u小部件。