텍스트 입력 검색의 도움으로 링크를 필터링하고 일치하지 않음을 숨기기

Question

나는 jquery 효과 및 함수에 익숙하지 않은 문제가 있습니다. 다른 빌드이지만 동일한 빌드 컨테이너의 페이지 카테고리에있는 링크를 필터링 할 수있는 간단한 필터 함수가 필요했습니다. 코드는 다음과 같습니다

html로 컨테이너를 내가 필터링하고 망가 일치하는 경우 아무것도 표시하지 않을 설정할 링크 : 위의

<div class="col-sm-3 py-4"> 
    <h4 class="text-white" id="hideOnFilter">Generatoren und Bilderupload</h4> 
    <nav class="nav flex-column" id="filterholder"> 
     <a class="nav-link text-white catlink" href="#" title="Cat 1 description" id="filterelement">Cat 1</a> 
     <a class="nav-link text-white catlink" href="#" title="Cat 2 description" id="filterelement">Cat 2</a> 
     <a class="nav-link text-white catlink" href="#" title="Cat 3 description" id="filterelement">Cat 3</a> 
     <a class="nav-link text-white catlink" href="#" title="Cat 4 description" id="filterelement">Cat 4</a>   
    </nav> 
</div> 

이러한 컨테이너는 항상 같은 클래스 ID 페이지에서 여섯 번 배치되지만, 및 구조.

$('.search').keyup(function(){ 
      var searchcatquery = $(this).val(); 
      //alert(searchcatquery); 
      //Filter and hide links which dont match to search input? 
      return false; 
}); 

Answer 1

• 어느 보관하지 않습니다 jquery filter

  $('.search').keyup(function(){ 
       var searchcatquery = $(this).val().toLowerCase(); //convert to lowercase  
  
       $(".catlink").show().filter(function(){ 
       return $(this).text().toLowerCase().indexOf(searchcatquery) == -1 //filter all those who doesn't have searchcatquery as substring 
       }).hide(); //hide filtered values 
  
       return false; 
      }); 
  

  주를 사용하여이 방법을 시도 : 내가 지금까지 있기 때문에 쓴 링크를 필터링 할

  JQuery와 부 요소 또는 키에 대해 id p는 HTML 페이지의 모든 요소에 대해 id을 구분합니다. id을 중복해서는 안됩니다.

• 위에서 주어진 논리는 필터링을 위해 id 속성을 사용하지 않습니다.