Highlight Collapsible DIV 's on 검색 키워드

"전문가 목록"에 대한 연락처 목록이 포함될 회사의 HTML 페이지를 만드는 중입니다. 현재 목록은 접을 수있는 DIV를 기반으로하며 서로 중첩되어 있습니다.Highlight Collapsible DIV 's on 검색 키워드

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 개요는 ...입니다. 그렇게하면 사용자가 HTML 페이지에서 키워드를 쉽게 찾을 수 있습니다. 여기

내가 강조 기능을 구현하기 위해 노력하고있어 jfiddle 작업입니다 : 이미 here에서의 jQuery 하이 라이터를 사용하여 시도 https://jsfiddle.net/dgaz8n5k/21/

하지만이 좋지 않아 내 검색 기능을 나누기.

도움을 주시면 대단히 감사하겠습니다. 감사!

출처

2016-06-20 J.Halon

잘 작동한다고 생각합니다. 조금 변경되었습니다. [JSFiddle] (https://jsfiddle.net/dgaz8n5k/23/). 그런데''[data-search-term * = " '+ searchTerm +'"] ''줄에서는''searchTerm'이 _ (공백)으로 구분되지 않는 하나의 매개 변수인지 확인하기 위해 ""사용해야합니다. –

@HaizhouLiu이 작품은 훌륭합니다! 당신이 그것을 게시하는 경우 나는 이것을 대답으로 받아 들일 것이다 :) 고마워! –

당신은 환영합니다 :) –

여기를 확인하시기 바랍니다. JSFiddle

각 keyup 이벤트에 대해 강조 표시 단어를 업데이트하십시오.

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

filter 방법은 하나 PARAM 수 있어야하며 _ (빈 공간)에 의해 분리되지 할 searchTerm 워프 ""를 사용한다.

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

또한 CSS 파일에 .highlight { background-color: yellow }를 추가해야합니다.

출처

2016-06-20 21:20:40

Highlight Collapsible DIV 's on 검색 키워드

답변

관련 문제