如何使一个简单的jQuery过滤器列表只接受整个单词，所以它不匹配部分单词，只接受整个单词

How to make a simple jQuery filter list accept only whole words, so it doesn't match partial words, only whole words

本文关键字：单词 不匹配部 何使一 简单 过滤器 jQuery 列表      更新时间：2023-09-26

http://jsfiddle.net/nicktheandroid/U8T8p/4/

(function($) {
    $('.filterinput').keyup(function() {
        var filter = $(this).val();
        if (filter.length > 2) {
            // this finds all links in the list that contain the input,
            // and hide the ones not containing the input while showing the ones that do
            $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
            $(list).find("a:Contains(" + filter + ")").parent().slideDown();
        } else {
            $(list).find("li").slideDown();
        }
        return false;
    })
}(jQuery));

这将根据您键入的内容是否与列表中单词的任何部分匹配来过滤列表。我试图让它只匹配整个单词，所以在输入完整单词之前，它不会说它有匹配。正则表达式会是最好的吗？或？我需要帮助，我尝试过的任何方法都没有奏效。

像这样的东西：http://jsfiddle.net/U8T8p/10/

        var containing = $('#list li').filter(function () {
            var regex = new RegExp('''b' + a, 'i');
            return regex.test($('a', this).text());
        }).slideDown();
        $('#list li').not(containing).slideUp();

正则表达式将匹配项限制为当前输入的文本以单词边界开头的匹配项。因此，输入"统计"后，您仍然会匹配"美国"。您可以通过更改为 RegExp('''b' + a + '''b', i) 来使其匹配完整的单词。

您可以使用已经提到的filter方法。或者，您可以使用自己的自定义过滤器轻松扩展jQuery，这是重用代码的好方法。

$.expr[':'].containsWord = function(elem, index, match) {
    var text = $(elem).text();
    return !!text.match(new RegExp('''b' + match[3] + '''b'));
};

现在像使用任何其他内置过滤器一样使用它 :containsWord('Some word') .请参阅 http://jsfiddle.net/U8T8p/9/

尝试这样的事情： http://jsfiddle.net/U8T8p/5/

$(list).find("a").filter(function() { return $(this).text() != filter; }).parent().slideUp();
$(list).find("a").filter(function() { return $(this).text() === filter; }).parent().slideDown();

您可以使用.filter来检查文本并向下滑动这些元素，并将这些元素作为 jQuery 对象传递给 .not 以使其他元素向上滑动：http://jsfiddle.net/U8T8p/8/。

(function($) {
    $('.filterinput').keyup(function() {
        var filter = $(this).val();
        if (filter.length > 2) {
            var a = $(list).find("a");
            var x = a.filter(function() {
                return $(this).text() === filter;
            });
            x.parent().slideDown();
            a.not(x).parent().slideUp();
        } else {
            $(list).find("li").slideDown();
        }
        return false;
    })
}(jQuery));
相关文章：