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

我有一个充满阳光的视野。面板内有一份文件清单。我在页面顶部有一个搜索框，供用户输入文档名

当前发生的情况

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

我想发生的事

我想发生的是如果找到匹配项，那么隐藏那些不匹配的面板和文档。单击“清除搜索”按钮返回所有面板和文档时（如页面刷新，但我不希望刷新）

这是我的代码

搜索框

而不是

$（this.show（）尝试显示以下内容：

或

脚本将如下所示：


$（函数（）{
$（“#搜索链接”）.keyup（函数（事件）{
如果（event.keyCode==13）
搜索（$（this.val（））；
});
$（“#按钮搜索”）。单击（函数（）{
搜索（$（“#SearchLink”）.val（）；
})
功能搜索（关键字）{
var textboxValue=keyword.toLowerCase（）；
$（'.panel body'）。每个（函数（）{
var-exist=false；
$（this.find（'ul li'）。每个（函数（）{
if（$（this）.find（'a'）.text（）.toLowerCase（）.indexOf（textboxValue）！=-1）{
存在=真实；
}
});
如果（存在===false）{
$（this.parent（）.removeClass（'in'）；
}否则{
$（this.parent（）.addClass（'in'）；
}
});
}
//当用户想要清除搜索时
$（“#按钮搜索”）。单击（函数（）{
$（“#搜索链接”）.val（“”）；
$（'.panel body'）。每个（函数（）{
$（this.parent（）.removeClass（'in'）；
});
$（'#SearchLink'）.blur（函数（）{
if（$.trim（this.value）==null）{
$（this.val（$（this.attr（'documentsearch'））；
}
});
});
})










这有什么作用？这就是我应该做的吗？我试过了，但结果是一样的，除非我遗漏了什么。这是为了扩展匹配的面板，我猜不出为什么它不起作用。插入正确的匹配项时，
exist
的值是否设置为“true”？我忘记在
collapse
类调用之前添加
。现在它似乎可以工作了，看看好的，这是扩展面板，但为我隐藏了文档名。Nvmd，我使用了您给出的第一个答案，但切换到了第二个答案，这很有效。只是一个提示：您可以使用console.log（）代替alert（），并在“inspect element”浏览器工具的console选项卡中查看日志。快点儿。我知道，但我只是想看看价值。。因此，我使用了警报来避免更多的按钮点击以进入控制台选项卡。无论如何，您必须单击按钮来关闭警报，而控制台将保持打开状态以进行下一次刷新。不过，这只是一个暗示。我开发我的网页时，控制台是全天打开的-实际上，减少了点击次数。。。而且，您实际上可以在控制台中看到数组和对象的内容。
<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>

// 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'));

        }
    });
});

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

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