返回按鈕上的所有鏈接點擊

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

---

現在我也有一個明確的按鈕..和當用戶點擊該按鈕，我想所有的滑塊，頭，UL的，李時珍，並鏈接到不需要刷新頁面返回。

這裏是我迄今爲止該按鈕：

---

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

---

所以只是作爲一個例子..如果我是用戶和Document 1輸入到搜索框中..並點擊搜索，它會返回標題First Header，下面將是Document 1。

現在，如果我打清除搜索..這將返回我的一切我h4元素，但沒有它們下面，除了用Document 1下的First Header元素。所以它保持了原有的搜索，只是返回休息在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

這將在按鍵或粘貼上實時過濾。當用戶在搜索中輸入東西時，如果鏈接包含文本，它將隱藏不包含文本的鏈接，並顯示鏈接。隨着值的變化，它將根據搜索值顯示或隱藏。

編輯：搜索現在勢必按鈕移到

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>