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

Creating a Live Search in HTML for non-list items

本文关键字：HTML 实时 搜索 创建 项目 列表      更新时间：2023-09-26

我正在尝试创建一个实时搜索文本框，该文本框将允许我搜索可折叠的列表菜单，以及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恢复到原始的折叠版本？

谢谢！

就目前情况来看，jQuery表达式似乎有问题。我用你的叉子把它换了一下，这似乎奏效了：https://jsfiddle.net/dgaz8n5k/

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

相关文章：