ハイライトCollapsible DIV's on検索キーワード

Question

私は、 "エキスパートリスト"の連絡先リストを含む私の会社のHTMLページを作成しています。現在、リストは折りたたみ可能な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ページ内でキーワードを見つけやすくなります。

ここ

私はハイライト機能を実装しようとしている作業jfiddleです：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方法、それは1つのparamであることを確認し、_（空きスペース）で区切られていない作るためにsearchTermをワープするために「」使用する必要があります。

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

また、.highlight { background-color: yellow }をCSSファイルに追加する必要があります。