Question

我正在尝试创建一个实时搜索文本框，允许我搜索我的可折叠列表菜单，以及HTML页面中嵌套的可折叠文件。

以下是我正在使用的HTML代码（注意它包含来自外部链接的.js和.css）

<!DOCTYPE html>
<html>
<head>
    <title>Experts List</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        html, .ui-mobile, .ui-mobile body {
            height: 765px;
        }

            .ui-mobile, .ui-mobile .ui-page {
                min-height: 765px;
            }

        .ui-content {
            padding: 10px 15px 0px 15px;
        }
    </style>
</head>

<body>
    <div>
        <div role="main" class="ui-content">
            <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
                <h3>Category</h3>
                <p>Description</p>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Sub-Category</h3>
                    <div data-role="collapsible" data-theme="a" data-content-theme="a">
                        <h3>Location</h3>
                        <p>Point of Contact</p>
                    </div><!-- /section 1A -->
                </div><!-- /section 1 -->
            </div>

            <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
                <h3>Subject</h3>
                <p>Description</p>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Sub Category</h3>
                    <div data-role="collapsible" data-theme="a" data-content-theme="a">
                        <h3>Location</h3>
                        <p>Point of Contact</p>
                    </div>
                </div>
            </div>

            <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
                <h3>Subject</h3>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Section</h3>
                    <p>Defenition</p>
                    <div data-role="collapsible" data-theme="a" data-content-theme="a">
                        <h3>Location</h3>
                        <p>Point of Contact</p>
                    </div>
                </div>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Subject2</h3>
                    <p>Defenition2</p>
                    <div data-role="collapsible" data-theme="a" data-content-theme="a">
                        <h3>Location2</h3>
                        <p>Point of Contact 2</p>
                    </div>
                </div>
            </div>

            <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
                <h3>Subject 3</h3>
                <div data-role="collapsible" data-theme="a" data-content-theme="a">
                    <h3>Section 3</h3>
                    <p>Definition 3</p>
                    <div data-role="collapsible" data-theme="a" data-content-theme="a">
                        <h3>Location 3</h3>
                        <p>Point of Contact 3</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

我已经尝试使用下面的代码（以及.js和.css）在HTML中使用和创建实时搜索。唯一的问题是，当我使用文本框搜索HTML页面时，它会取消折叠所有部分。当我删除文本框中的任何输入时，它只是按原样保留，它不会恢复为原始的折叠形式。

以下是jfiddle链接https://jsfiddle.net/Lxt22gw1/

任何人都可以帮助或者至少指出我需要为实时搜索编码的正确方向来搜索所有内容，因为在删除输入时它会将HTML还原为原始折叠版本吗？

谢谢！

Answer 1

就目前而言，看起来你的jQuery表达式有问题。我在你的小提琴的一个叉子里改变它，这似乎有用：https://jsfiddle.net/dgaz8n5k/

错误代码为[data-search-term *= ' + searchTerm + ']，我将其更改为[data-search-term*="' + searchTerm + '"]。

为HTML创建非列表项目的实时搜索

1 个答案: