Bootstrap 4, как фильтровать список на основе значений атрибутов данных

Question

У меня есть следующая форма, работающая на PHP

    <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
        <label class="assistive-text" for="s">
            <?php esc_html_e( 'Search', 'ithub' ); ?>
        </label>
        <div class="input-group">
            <input class="field form-control" id="s" name="s" type="text" value="<?php the_search_query(); ?>">
            <span class="input-group-append">
                <input class="submit btn btn-primary" id="searchsubmit" name="submit" type="submit" ?>">
            </span>
        </div>
        <div class="col-lg-12 ml-auto p-2">
          <ul class="list-group" id="myList">
            <li class="list-group-item"><a href="#" data-meta="First item, house">First item</a></li>
            <li class="list-group-item"><a href="#" data-meta="Second item, car">Second item</a></li>
            <li class="list-group-item"><a href="#" data-meta="Third item, garage">Third item</a></li>
            <li class="list-group-item"><a href="#" data-meta="Fourth item, yard">Fourth</a></li>
        </ul>  
    </form>

С Bootstrap 4, есть ли способ (возможно, компонент или метод), чтобы я мог фильтровать мой list-group на основе символов, которые я печатаю в поле ввода? Например, если я начну вводить «hou», в моем list-group будет отображаться только первая позиция, поскольку она достаточно близка к house в качестве значения данных?

Возможно ли это?

Answer 1

Вот решение с использованием jQuery. Я отфильтровал .data('meta'), чтобы найти 'hou', как в вашем примере. Если вам нужно отфильтровать по тексту в самой привязке, вы можете использовать .text() вместо этого (раскомментируйте строки ниже)

$('#s').on('input',function(e){
    let input = $(this).val()
    let filter = input.toUpperCase()
    $('.list-group .list-group-item').each(function() {
      let li = $(this)
      let anchor = li.children('a')
      // Filter by text
      // if(anchor.text().toUpperCase().indexOf(filter) > -1) {
      // Filter by meta
      if(anchor.data('meta').toUpperCase().indexOf(filter) > -1) {
        li.removeClass('d-none')
      } else {
        li.addClass('d-none')
      }
    });
});

Вот живая демонстрация
https://www.bootply.com/hKmCpyJvUS