Question

我一直致力于为我的公司创建一个HTML页面，其中包含一个＆＃34;专家列表＆＃34;的联系人列表。目前，该列表基于可折叠的DIV，并且彼此嵌套。

HTML页面还包含一个允许用户搜索列表的搜索功能。这是我目前的HTML大纲......



<div>
    <input type="text" class="live-search-box" placeholder="Search Here" />
    </div>

<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>Defenition</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>Category2</h3>
            <p>Defenition2</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 Contact2</p>
                </div>
            </div>
        </div>


    </div>
</div>

问题是，我正在尝试实现突出显示功能，该功能将突出显示实时搜索框中的关键字。这样，用户就可以更轻松地在HTML页面中找到关键字。

以下是我尝试实施精彩集锦功能的工作小说：https://jsfiddle.net/dgaz8n5k/21/

我已经尝试过使用here中的jQuery荧光笔，但它破坏了我的搜索功能，这不是很好。

非常感谢任何帮助！谢谢！

Answer 1

请检查此JSFiddle。

对于每个keyup事件，请更新突出显示的单词。

// remove prevoius highlight
$(this).removeHighlight();
// add new highlight
$(this).find('h3').highlight(searchTerm);
$(this).find('p').highlight(searchTerm);

filter方法应使用“”来扭曲searchTerm以确保它是一个参数，而不是由_（空格）分隔。

'[data-search-term *= "' + searchTerm + '"]'
//                    ^                  ^

还需要将.highlight { background-color: yellow }添加到css文件中。

突出显示搜索关键字上的可折叠DIV

1 个答案: