使用jQuery过滤列表，当输入多个单词时，使用AND条件

Filtering a list with jQuery, when multiple words are entered as input, using AND condition

本文关键字：使用 单词时 条件 AND jQuery 过滤 列表 输入      更新时间：2023-09-26

我正在尝试过滤基于用户输入的列表，使用jQuery。到目前为止，它工作得很好，但我希望能够在用户输入多个单词时充分过滤列表，使用相当于AND的条件。

例如，如果用户输入"Toyota manual"，仍然应该显示以下两个元素:

  1. 丰田Echo 2001手册
  2. 丰田卡罗拉2006手动版

目前，对于当前的jsFiddle，过滤器查找确切的字符串("Toyota manual")，因此没有找到。我如何修改我的代码使其按预期工作?

HTML/JS 

    <label for="filterCars">Filtrer la liste des indicateurs :</label>
<input id="filterCars" class="txtfilterCars" type="text" name="txtRecherche">
<ul class="filterCars">
    <li class="elemCar">Ford escort 2001 manual</li>
    <li class="elemCar">Ford escort 2002 automatic</li>
    <li class="elemCar">Dodge Caravan 2001 automatic</li>
    <li class="elemCar">Hyundai Excel 2003 manual</li>
    <li class="elemCar">Toyota Echo 2001 manual</li>
    <li class="elemCar">Toyota Corolla 2006 manual</li>
    <li class="elemCar">Hyundai Accent 2009 Automatic</li>
</ul>
$(document).ready(function () {
    function noaccent(myString) {
        temp = myString.replace(/[àâä]/g, "a");
        temp = temp.replace(/[éèêë]/g, "e");
        temp = temp.replace(/[îï]/g, "i");
        temp = temp.replace(/[ôö]/g, "o");
        temp = temp.replace(/[ùûü]/g, "u");
        temp = myString.replace(/[ÀÂÄ]/g, "A");
        temp = temp.replace(/[ÉÈÊË]/g, "E");
        temp = temp.replace(/[ÎÏ]/g, "I");
        temp = temp.replace(/[ÔÖ]/g, "O");
        temp = temp.replace(/[ÙÛÜ]/g, "U");
        return temp;
    }
    $("#filterCars").keyup(
    function () {
        var filter = noaccent($(this).val()),
            count = 0;
        $(".filterCars li.elemCar").each(
        function () {
            if (noaccent($(this).text()).search(new RegExp(filter, "i")) < 0) {
                $(this).addClass("cacheElementFiltre");
            } else if (!($(this).hasClass("cacheElement"))) {
                $(this).removeClass("cacheElementFiltre");
                count++;
            }
        });
    });
});
CSS 

//CSS
    .cacheElement, .cacheElementFiltre {
        display: none;
    }
https://jsfiddle.net/f52o3kpd/

在这种情况下，您需要使用更高级的正则表达式:

$("#filterCars").keyup(function () {
    var text = $.trim(noaccent($(this).val())),
        filter = '^(?=.*''b' + text.split(/'s+/).join('''b)(?=.*''b') + ').*$',
        reg = RegExp(filter, 'i'),
        count = 0;
    $(".filterCars li.elemCar").each(function () {
        if (!reg.test(noaccent($(this).text()))) {
            $(this).addClass("cacheElementFiltre");
        } else if (!($(this).hasClass("cacheElement"))) {
            $(this).removeClass("cacheElementFiltre");
            count++;
        }
    });
});

Regexp看起来很复杂，但它允许按任意顺序过滤单词:"Ford 2001"或"2001 Ford"。

演示:

https://jsfiddle.net/f52o3kpd/2/

相关文章：