CODEWITHSUNDEEP
javascriptjqueryhtmlcss
J.Halon
J.Halon

Reputation: 57

Creating a Live Search in HTML for non-list items

I'm trying to create a live-search text box that will allow me to search my collapsible list menu, along with the nested collapsible in the HTML page.

Here is the HTML Code that I'm using (note it includes a .js and .css from external links)

<!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>

I already tried using and creating a live search in the HTML using the following code (along with .js and .css) from below. The only problem is that when I search through the HTML page using the text box it un-collapses all the sections. And when I delete any input in the text box it just stays as is, it doesn't revert back to it's original collapsed form.

Here is the jfiddle link https://jsfiddle.net/Lxt22gw1/

Can anyone help or at least point me in the right direction of what needs to be coded for the live search to search everything as upon deleting input it reverts the HTML back to the original collapsed version?

Thanks!

Upvotes: 1

Views: 509

Answers (1)

Daan Meijer
Daan Meijer

Reputation: 1348

As it stood, it looks like your jQuery expression was faulty. I changed it in a fork of your fiddle, and that seemed to work: https://jsfiddle.net/dgaz8n5k/

The faulty code was [data-search-term *= ' + searchTerm + '], which I changed to [data-search-term*="' + searchTerm + '"].

Upvotes: 1

Related Questions