검색 및 두 개의 별도의 HTML 태그 값을 일치하고 숨기기/표시 일치 된 div

Question

: dynamically show/hide div based on the input of textbox

나는/쇼 검색 입력, h4s 일치하는 입력에 따라 아래의 div가 숨겨져 있습니다. 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); 
    }); 
}); 

위대한대로 작동합니다. 하지만 태그 (html 아래 div에있는 .tags)에있는 태그를 검색하려고합니다.

둘 다 검색하는 데 문제가 있습니다. 한 가지 시도는 html로 ".info"라는 래핑 div 내의 내용과 h4와 태그를 일치시키는 것입니다. 그러나 행운이 없음

Answer 1

문제는 여기에 설명 된 다른 접근 방법을 사용하여 해결합니다 : Show divs based on text search 특정 태그 대신 모든 기본 콘텐츠를 검색하여 문제가 해결되었습니다. 아래

실시 예의 경우 텍스트

$('#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(); 
     } 
    }); 
}); 

그래서 위의 코드 .hs_cos_wrapper_widget 입력 필드 아래 클래스 div가 필터 (약간 위 링크 논의 @ dku.rajkumar의 코드에서 수정) 입력은 해당 div의 텍스트와 일치합니다.