Поисковая фильтрация

Question

Я мог бы использовать небольшую помощь, потому что я ищу, чтобы отфильтровать список.

Для этого я начал писать этот скрипт: https://jsfiddle.net/mycreatz/pcoqLx56/, который работает почти так, как мне хотелось бы. Если я наберу " i10 keyvisual ", результат будет выглядеть хорошо, но если я наберу " keyvisual i10 ", он не будет работать.

Есть идеи, как решить проблему?

<div class="search">
        <input type="text" placeholder="search" data-search />
    </div>
    <div class="items">

   <ul>
          <li data-filter-item data-filter-tag="hyundai i10 keyvisual" class="hid">
          <a href="#">Key Visual</a> (11)
        </li>
          <li data-filter-item data-filter-tag="hyundai i10 clearcut" class="hid"> 
          <a href="#">Clearcut</a> (1)
        </li>
          <li data-filter-item data-filter-tag="hyundai i10 exterieur" class="hid">
          <a href="#">Exterieur</a> (29)
        </li>
          <li data-filter-item data-filter-tag="hyundai i10 interieur" class="hid">
          <a href="#">Interieur</a> (13)
        </li>
          <li data-filter-item data-filter-tag="hyundai i10 lifestyle" class="hid">
          <a href="#">Lifestyle</a> (0)
        </li>
        </ul>

      <ul>
          <li data-filter-item data-filter-tag="hyundai i20 keyvisual" class="hid">
          <a href="#">Key Visual</a> (11)
        </li>
          <li data-filter-item data-filter-tag="hyundai i20 clearcut" class="hid"> 
          <a href="#">Clearcut</a> (1)
        </li>
          <li data-filter-item data-filter-tag="hyundai i20 exterieur" class="hid">
          <a href="#">Exterieur</a> (29)
        </li>
          <li data-filter-item data-filter-tag="hyundai i20 interieur" class="hid">
          <a href="#">Interieur</a> (13)
        </li>
          <li data-filter-item data-filter-tag="hyundai i20 lifestyle" class="hid">
          <a href="#">Lifestyle</a> (0)
        </li>
        </ul>

       <ul>
          <li data-filter-item data-filter-tag="hyundai i30 keyvisual" class="hid">
          <a href="#">Key Visual</a> (11)
        </li>
          <li data-filter-item data-filter-tag="hyundai i30 clearcut" class="hid"> 
          <a href="#">Clearcut</a> (1)
        </li>
          <li data-filter-item data-filter-tag="hyundai i30 exterieur" class="hid">
          <a href="#">Exterieur</a> (29)
        </li>
          <li data-filter-item data-filter-tag="hyundai i30 interieur" class="hid">
          <a href="#">Interieur</a> (13)
        </li>
          <li data-filter-item data-filter-tag="hyundai i30 lifestyle" class="hid">
          <a href="#">Lifestyle</a> (0)
        </li>
        </ul>

    </div>

и javascript:

$('[data-search]').on('keyup', function() {
    var searchVal = $(this).val();
    var filterItems = $('[data-filter-item]');

    if ( searchVal.length > 2 ) {
        filterItems.addClass('hidden');
    filterItems.removeClass('hid');
        $('[data-filter-item][data-filter-tag*="' + searchVal.toLowerCase() + '"]').removeClass('hidden');
    } else {
        filterItems.removeClass('hidden');
    filterItems.addClass('hid');
    }
});

Answer 1

Я верю, что это сделает то, что вы ищете. Он должен работать для произвольного числа разделенных пробелами значений. У меня это работало на живом (тестовом) сайте.

        $('[data-search]').on('keyup', function() {
            const searchVal = $(this).val().toLowerCase();
            const splitVal = searchVal.split(" ");
            const filterItems = $('[data-filter-item]');
            var   tagString = "[data-filter-item]";

            if (searchVal.length > 2) {
                filterItems
                        .addClass('hidden')
                        .removeClass('hid');

                splitVal.forEach( function (item) {
                    tagString += `[data-filter-tag*="${item}"]`;
                });

                $(`${tagString}`).removeClass('hidden');
            } else {
                filterItems
                        .removeClass('hidden')
                        .addClass('hid');
            }
        });