搜索过滤

Question

我需要一点帮助，因为我想过滤一个列表。

为此我开始写这个脚本。https:/jsfiddle.netmycreatzpcoqLx56。 如果我输入""，它的工作原理和我想的差不多。i10关键视觉"结果看起来不错，但如果我输入"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');
            }
        });