Markieren Sie zusammenklappbare DIVs auf das Suchschlüsselwort

Question

Ich habe an der Erstellung einer HTML-Seite für meine Firma gearbeitet, die eine Liste von Kontakten für eine "Expertenliste" enthalten wird. Gegenwärtig basiert die Liste auf zusammenklappbaren DIVs und ist ineinander verschachtelt.

Die HTML-Seite enthält auch eine Suchfunktion, mit der ein Benutzer die Liste durchsuchen kann. Hier ist die aktuelle HTML-Gliederung Ich habe ...

 
 

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

Die Sache ist, ich versuche, eine Highlight-Funktion zu implementieren, die die Schlüsselwörter in dem Live-Suche-Feld markieren werden. Auf diese Weise wird es für einen Benutzer einfacher sein, das Schlüsselwort in der HTML-Seite zu finden. Hier

ist der Arbeits jfiddle Ich versuche, die Highlight-Funktion zu implementieren: https://jsfiddle.net/dgaz8n5k/21/

Ich habe bereits versucht, mit dem jQuery-Highlighter von here aber es bricht meine Suche-Funktion, die nicht gut ist.

Jede Hilfe wird sehr geschätzt! Vielen Dank!

Answer 1

Bitte überprüfen Sie diese JSFiddle.

Aktualisieren Sie für jedes Ereignis keyup das Hervorhebungswort.

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

Die Methode sollte filter „Verwendung“ searchTerm verziehen, um sicherzustellen, dass es eine param und nicht durch _ (Leerzeichen) getrennt.

Auch müssen .highlight { background-color: yellow } zu CSS-Datei hinzufügen.