使用AND条件输入多个单词作为输入时，使用jQuery过滤列表 [英] Filtering a list with jQuery, when multiple words are entered as input, using AND condition

问题描述

我正在尝试使用jQuery根据用户输入过滤列表。到目前为止它工作正常，但我希望能够在用户输入多个单词时使用等效的AND条件充分过滤列表。

I'm trying to filter a list based on user input, with jQuery. So far it works OK, but I'd like to be able to filter the list adequately if the user inputs more than one word, using the equivalent of an AND condition.

例如，如果用户输入丰田手册，则仍会显示以下两个元素：

For example, if the user enters "Toyota manual", the following two elements shoud still be displayed:

1. Toyota Echo 2001手册


2. Toyota Corolla 2006手册

目前，使用当前的jsFiddle，过滤器会查找确切的字符串（丰田手册）所以它找不到一个。如何修改我的代码以使其按预期工作？

At the moment, with the current jsFiddle, the filter looks for the exact string ("Toyota manual") so it doesn't find one. How can I modify my code to make it work as intended?

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/

推荐答案

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

In this case you would need to use more advanced regular expression:

$("#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福特。

Regexp looks complex but it will allow filtering by words in arbitrary order: "Ford 2001" or "2001 Ford".

演示： https://jsfiddle.net/f52o3kpd/2/

这篇关于使用AND条件输入多个单词作为输入时，使用jQuery过滤列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！