单词的jQuery搜索页面无法按预期工作

Question

我有一个充满bootstrap collapsible panels的视图。面板内部是文档列表。我在页面顶部有一个搜索框，供用户输入文档名称。

目前发生的事情

当用户键入文档名称并按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”时，面板2应该完全隐藏，但是当我单击“清除搜索”按钮时，面板2应该与Panel One一起返回（即使面板其中一个未隐藏，因为它包含与搜索匹配的文档。

  

的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();尝试显示parent：

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