Как сделать простой список фильтров jQuery, принимающий только целые слова, чтобы он не совпадал с частичными словами, только с целыми словами

Question

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

Это отфильтрует список на основании того, что введенное вами слово соответствует ЛЮБОЙ части слова в списке. Я пытаюсь сделать так, чтобы оно совпадало только с целыми словами, поэтому не будет совпадений, пока не наберется полное слово. Будет ли Regex лучше? Или же? Мне нужна помощь, ничего, что я пробовал, не сработало.

Answer 1

Примерно так: 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();

Ограничения регулярного выражения совпадают с теми, где текущий введенный текст начинается с границы слова.Итак, набрав «Stat», вы все равно подойдете к «United States».Вы можете сделать так, чтобы оно соответствовало полному слову, изменив на RegExp('\\b' + a + '\\b', i).

Answer 2

Вы можете использовать метод 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/

Answer 3

Вы можете использовать .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));

Answer 4

Попробуйте что-то вроде этого: 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();