jQuery 词的搜索页面未按预期工作

Question

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

目前发生了什么

当用户输入文档名称并按回车键时..如果找到匹配项..包含该文档的面板不会展开，但如果我点击它，它就会展开并显示我匹配的文档...其余面板仍然可见但无法打开，因为它们没有任何匹配项。

我想要发生的事情

我想要发生的是，如果找到匹配项，则隐藏没有匹配项的面板和文档。单击清除搜索按钮以带回所有面板和文档时（类似于页面刷新，但我不想刷新）。

这是我的代码

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>

所以当我搜索 'Test Document 1'.. 时，面板二应该完全隐藏，但是当我单击 'Clear 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

而不是 $(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>

jQuery 词的搜索页面未按预期工作

jQuery Search page for word not working as expected

javascript

jquery

panels

twitter-bootstrap