@krispey102

Js filter по найденным словам?

Есть следующая вёрстка вопросов и поиска по названию вопроса:
(Блоки с классом ia-item - их около 200 на странице, привел пример одного)
<input class="faq-search-input-js" placeholder="Search..." type="text" id="search-faq-input-filter">

<div class="ia-item new-item active">
                <div class="ia-title js-acc-open">
                    <div class="ia-title-sub"><i></i></div>
                    <div class="ia-title-link">
                        Which measures have you taken to make your venues Covid-safe?                    </div>
                </div>
                <div class="ia-content-wrapper" style="height:573.537px;">
                    <div class="ia-content">
                        <div class="is-inner-style">
                            <p>
                                <br> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br> <br> 
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat..
                 </p>
                        </div>
                    </div>
                </div>
            </div>


input в самом вверху выполняет роль поиска по названию вопроса (в классе ia-title-link)
Данный код выполняет поиск по названию вопроса:
$("#search-faq-input-filter").on("keyup", function () {  //2
            var value = $(this).val().toLowerCase();  //3
            $(".ia-item .ia-title .ia-title-link").filter(function () {  //4
                $(this).parent().parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)  //5
            });
        });


Как сделать так, чтобы он еще искал не только по названию вопроса, а еще и захватывал содержимое вопроса? (класс ia-content-wrapper)
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
$('#search-faq-input-filter').on('input', e => {
  const val = $(e.target).val().toLowerCase();

  $('.ia-item')
    .hide()
    .filter((i, n) => (
      $('.ia-content', n).text().toLowerCase().includes(val) ||
      $('.ia-title-link', n).text().toLowerCase().includes(val)
    ))
    .show();
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы