Question

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

我有一个搜索输入，根据输入显示/隐藏下面的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中，带有.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中的任何文本匹配时，上面的代码会在输入字段下方使用类.hs_cos_wrapper_widget过滤div。

搜索并匹配两个单独的html-tags值并隐藏/显示匹配的div

1 个答案: