Выделите Collapsible DIV's по ключевому слову поиска

Я работаю над созданием HTML-страницы для своей компании, которая будет содержать список контактов для «списка экспертов». В настоящее время список основан на разборчивых DIV и вложенных друг в друга.Выделите Collapsible DIV's по ключевому слову поиска

Страница 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 Я пытаюсь реализовать функцию Highlight: https://jsfiddle.net/dgaz8n5k/21/

Я уже пробовал использовать фломастер JQuery из here, но он ломает мою функцию поиска, которая не является хорошим.

Любая помощь очень ценится! Благодаря!

источник

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 метод должен использовать «», чтобы деформировать searchTerm, чтобы убедиться, что это один и парам не отделены друг от _ (пустое место).

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

необходимо также добавить .highlight { background-color: yellow } в CSS-файл.

источник

2016-06-20 21:20:40

Выделите Collapsible DIV's по ключевому слову поиска

ответ

Смежные вопросы