Возврат всех ссылок на кнопку

Question

У меня есть страница, содержащая большое количество ссылок.

Я интегрировал окно поиска пользователя ввести имя ссылки, и когда они нажмите кнопку «Поиск», он возвращает все ссылки, которые содержат то, что пользователь ввел:

Вот раздел из HTML для этой страницы:

---

<h4><a href="#" id="Trig16">First Header</a></h4> 
<div class="slider" id="Slide16"> 
    <ul> 
     <li><a href="/TestDocument.doc" target="_blank">Document 1</a></li> 
     <li><a href="/TestDocument2.doc" target="_blank">Document 2</a></li> 
     <li><a href="/TestDocument3.doc" target="_blank">Document 3</a></li> 
    </ul> 
</div> 

<h4><a href="#" id="Trig19">Second Header</a></h4> 
<div class="slider" id="Slide19"> 
    <ul> 
     <li><a href="~/Docs/Document4.pdf" target="_blank">Document 4</a></li> 
     <li><a href="~/Docs/Document5.pdf" target="_blank">Document 5</a></li> 
    </ul> 
</div> 

Вот JavaScript для этой кнопки:

---

$("#ButtonSearch").click(function() { 
    var textboxValue = $("#SearchLink").val().toLowerCase(); 
    $('.slider').each(function() { 
     var exist = false; 
     $(this).find('ul li').each(function() { 
      if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) { 
       $(this).show(); 
       exist = true; 
      } 
      else 
       $(this).hide(); 
     }); 
     if (exist === false) { 
      $(this).prev('h4').hide(); 
      $(this).hide(); 
     } 
     else { 
      $(this).prev('h4').show(); 
     } 
    }); 
}); 

---

Теперь у меня есть четкая кнопка .. и когда пользователь нажимает эту кнопку, я хочу все ползунки, заголовки, ули, Ли, и ссылки, чтобы вернуться без обновления страницы.

Вот то, что я до сих пор для этой кнопки:

---

$("#ButtonClearSearch").click(function() { 
    $("#SearchLink").val(""); 
    $('.slider').each(function() { 
     $(this).prev('h4').show(); 
    }); 
}); 

---

Так же, как пример .. если бы я был пользователем и напечатал в Document 1 в поле поиска .. и нажмите «Поиск», он вернет заголовок First Header, а внизу будет Document 1.

Теперь, если я ударил Очистить поиск .. это не вернет мне все мои h4 элементов, но ничего под ними, для First Header элемента с Document 1 внизу кроме .. Так что сохранение оригинального поиска и просто возвращая остаток элементов h4.

Итак, мой вопрос в том, как вернуть все, нажав кнопку четкого поиска?

Answer 1

Я понял это, используя то, что у меня уже есть:

$("#ButtonClearSearch").click(function() { 
    $("#SearchLink").val(""); 
    $('.slider').each(function() { 
     $(this).prev('h4').show(); 
     $(this).children().each(function() { 
      $('ul li').show(); 
      $('a').show(); 
     }); 
    }); 
}); 

Answer 2

Это будет фильтровать в реальном времени при нажатии или вставке. Поскольку ваш пользователь вводит вещи в поиск, если ссылка содержит текст, он будет скрывать ссылки, которые не содержат текст, и он будет показывать ссылки, которые делают. По мере изменения значения оно будет отображаться или скрываться в зависимости от значения поиска.

Edit: Поиск теперь связан с buttton

let filter = function(){ 
 
    
 
    $filter = $('#search-filter').val(); 
 
    
 
    $.each($('a'),function(k,v){ 
 
    
 
    let heading = '#'+$(v).closest('div').attr('data-bind'); 
 
    let sibs = $(v).parent().siblings(); 
 
    
 
    if(v.innerText.toLowerCase().indexOf($filter) > -1){ 
 
     //Show 
 
     $(v).closest('li').show(); 
 
    } 
 
    else { 
 
     //Hide 
 
     $(v).closest('li').hide(); 
 
    } 
 
    
 
    }); 
 
} 
 

 
$('#searchBtn').on('click',filter); 
 

 
$('#clrBtn').on('click',function(){ 
 
    $("#search-filter").val(""); 
 
    filter(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search-filter"> <input id="searchBtn" type="button" value="Search"> <input id="clrBtn" type="button" value="clear"> 
 

 
<h4 id="Trig16">First Header</h4> 
 
<div class="slider" id="Slide16" data-bind="Trig16"> 
 
    <ul> 
 
     <li><a href="/TestDocument.doc" target="_blank">Document 1</a></li> 
 
     <li><a href="/TestDocument2.doc" target="_blank">Document 2</a></li> 
 
     <li><a href="/TestDocument3.doc" target="_blank">Document 3</a></li> 
 
    </ul> 
 
</div> 
 

 
<h4 id="Trig19">Second Header</h4> 
 
<div class="slider" id="Slide19" data-bind="Trig19"> 
 
    <ul> 
 
     <li><a href="~/Docs/Document4.pdf" target="_blank">Document 4</a></li> 
 
     <li><a href="~/Docs/Document5.pdf" target="_blank">Document 5</a></li> 
 
    </ul> 
 
</div>