I have been working on developing an HTML page for my company that will showcase a list of contacts in an "experts list". Currently, the list is structured using collapsible DIVs nested within each other.
Additionally, the HTML page features a search functionality that allows users to search through the list. Below is the current HTML outline I have...
<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>Definition</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>Definition2</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>
One thing I am working on is implementing a Highlight Feature that will highlight the keywords entered in the live-search-box. This will make it easier for users to locate the relevant keyword within the HTML page.
Here is the jsfiddle for the working example I am trying to implement the Highlight feature: https://jsfiddle.net/dgaz8n5k/21/
I have tried using the jQuery highlighter from here, but it interferes with my search feature, which is not desirable.
Any assistance in this matter would be greatly appreciated! Thank you!