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，其下方将是{{ 1}}。

现在，如果我点击清除搜索...它将返回我的所有Document 1元素，但除了下面有h4的{{1}}元素之外，没有任何内容。所以它保留原始搜索并返回其余的First Header元素..

所以我的问题是如何点击清除搜索按钮返回所有内容？

Answer 1

这将在按键或粘贴时实时过滤。当您的用户在搜索中输入内容时，如果链接包含文本，它将隐藏不包含文本的链接，并显示链接。随着值的变化，它将根据搜索的值显示或隐藏。

编辑：搜索现在绑定到按钮

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>

Answer 2

我已经用我已经拥有的东西想出了这个：

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

点击按钮返回所有链接

2 个答案: