jQuery搜索页面的单词无法正常工作

Question

我的视图装满了引导折叠面板。面板内部是文档列表。我在页面顶部有一个搜索框，供用户输入文档名称。

当前发生的事情

当用户以文档的名称键入并按Enter。匹配...其余面板仍然可见，但由于没有任何匹配，因此不打开。

我想发生的事情

我想发生的事情是，如果找到了匹配项，请隐藏没有匹配的面板和文档。单击"清除搜索"按钮以将所有面板和文档带回（例如页面刷新，但我不想刷新）。

这是我的代码

搜索框

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

可折叠面板示例

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

因此，当我搜索'测试文档1'时。然后面板两个应完全隐藏，但是当我单击"清除搜索"按钮时，则应该将面板二与一个面板一起恢复（即使面板一个人没有隐藏，因为它包含与搜索匹配的文档）。

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

而不是$(this).show();尝试显示父级：

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

或

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

脚本会喜欢的：

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