Return all links on button click

Question

I have a page that contains a large amount of links.

I have integrated a search box for the user to type in the link name, and when they hit the button 'Search', it returns all links that contain what the user typed in:

Here is a section of HTML for this page:

---

<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>

Here is the JavaScript for that button:

---

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

---

Now I also have a clear button.. and when the user hits that button I want all sliders, headers, ul's, li's, and links to return without a page refresh.

Here is what I have so far for that button:

---

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

---

So just as an example.. if I were the user and typed in Document 1 into the search box.. and hit search, it would return the header First Header and underneath would be the Document 1 .

Now if I hit Clear search.. it would return me all of my h4 elements, but nothing underneath them, except for the First Header element with the Document 1 underneath.. So it is keeping the original search and just returning the rest of the h4 elements..

So my question is how do I return everything on click of the clear search button?

Answer 1

This will filter in realtime on keypress or paste. As your user types things into the search if the link contains the text it will hide links that do not contain the text and it will show links that do. As the value changes it will show or hide based on the value of the search.

Edit: Search is now bound to 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> 

Answer 2

I have figured this out, using what I already have:

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