jQuery Search page for word not working as expected

Question

I have a view full of bootstrap collapsible panels. Inside the panels are a list of documents. I have a search box at the top of the page for the user to type in the document name.

What currently happens

When the user types in the name of a document and presses enter.. if a match is found.. the panel that contains the document does not expand, but if I click on it, then it expands and shows me the document that matched... the rest of the panels are still visible but do not open because they don't have any matches.

What I want to happen

What I want to happen is if a match is found then hide the panels and documents that don't have a match. When the clear search button is clicked to bring back all panels and documents (like a page refresh but I do not want a refresh).

Here is my code

Search Box

<div id="Search-Section">
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." style="margin-left: 36%;"/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" style="float: right; margin-right: -2%;"/>
        </div>
        <div class="col-md-6">
            <input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" style="margin-left: -69%;"/>
        </div>
    </div>
</div>

Collapsible Panel Example

<div class="row" style="margin-top: 2%;">
    <div class="col-md-6">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Panel One</a>
                    </h3>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul>
                            <li><a href="~/Docs/testdoc1.pdf" target="_blank">Test Document 1</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a data-toggle="collapse" href="#collapse2">Panel Two</a>
                    </h3>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul>
                            <li><a href="~/Docs/testdoc2.pdf" target="_blank">Test Document 2</a></li>
                            <li><a href="~/Docs/testdoc3.pdf" target="_blank">Test Document 3</a></li>
                            <li><a href="~/Docs/testdoc4.doc" target="_blank">Test Document 4</a></li>
                            <li><a href="~/Docs/testdoc5.doc" target="_blank">Test Document 5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

So when I search for 'Test Document 1'.. then Panel Two should be completely hidden, but when I click 'Clear Search' button then Panel Two should be brought back along with Panel One (even though Panel One wasn't hidden because it contained a document that matched the search).

jQuery

// When user wants to search for document

$("#SearchLink").keyup(function (event) {
    if (event.keyCode == 13) {
        var textboxValue = $("#SearchLink").val().toLowerCase();
        alert(textboxValue);
        $('.panel-body').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('.panel-title').hide();
                $(this).hide();
            } else {
                $(this).prev('.panel-title').show();

            }
        });
    }
});

// When user wants to clear search

$("#ButtonClearSearch").click(function () {
    $("#SearchLink").val("");

    $('.panel-body').each(function() {
        $(this).prev('h4').show();
        $(this).children().each(function() {
            $('ul li').show();
            $('a').show();
        });
    });
    $('#SearchLink').blur(function() {
        if ($.trim(this.value) == null) {
            $(this).val($(this).attr('Document Search'));

        }
    });
});

Answer 1

instead of $(this).show(); try to show the parent:

$(this).parents('.collapse').show();

or

$(this).parents('.collapse').addClass('in');

the script will like this:

$(function(){
	$("#SearchLink").keyup(function (event) {
		if (event.keyCode == 13)
			search($(this).val());
	});

	$('#ButtonSearch').click(function(){
		search($("#SearchLink").val());
	})
	
	function search(keyword){
		var textboxValue = keyword.toLowerCase();
		$('.panel-body').each(function () {
			var exist = false;
			$(this).find('ul li').each(function () {
				if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
					exist = true;
				}
			});
			if (exist === false) {
				$(this).parent().removeClass('in');
			} else {
				$(this).parent().addClass('in');
			}
		});
	}
	
	// When user wants to clear search

	$("#ButtonClearSearch").click(function () {
		$("#SearchLink").val("");
		$('.panel-body').each(function() {
			$(this).parent().removeClass('in');
		});
		$('#SearchLink').blur(function() {
			if ($.trim(this.value) == null) {
				$(this).val($(this).attr('Document Search'));

			}
		});
	});
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="Search-Section">
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" />
        </div>
        <div class="col-md-6">
            <input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" />
        </div>
    </div>
</div>

<div class="row" style="margin-top: 2%;">
    <div class="col-md-6">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Panel One</a>
                    </h3>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul>
                            <li><a href="~/Docs/testdoc1.pdf" target="_blank">Test Document 1</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a data-toggle="collapse" href="#collapse2">Panel Two</a>
                    </h3>
                </div>
                <div id="collapse2" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul>
                            <li><a href="~/Docs/testdoc2.pdf" target="_blank">Test Document 2</a></li>
                            <li><a href="~/Docs/testdoc3.pdf" target="_blank">Test Document 3</a></li>
                            <li><a href="~/Docs/testdoc4.doc" target="_blank">Test Document 4</a></li>
                            <li><a href="~/Docs/testdoc5.doc" target="_blank">Test Document 5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>