搜索过滤

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');
            }
        });