Не сообщать правду, когда я думаю, что следует, вместо этого сообщая обо всех ложных

Question

http://jsfiddle.net/nicktheandroid/QhL2M/ (введите "пока" в поле ввода ")

Назначение скрипта: каждый li содержит слова тега. Когда пользователь вводит одно из этих слов тега в поле input, он скрывает все символы li, которые не содержат этого слова тега. Несколько слов могут быть введены в input, если более чем 1 li слов тега совпадает с любым из слов в input, то они отображаются. Таким образом, в основном это отфильтрованный список, который допускает несколько слов и показывает все соответствующие li, которые содержат любое из слов, введенных в input. Он совпадает только с целыми словами, а не с частичными словами, и он должен обновлять список совпадений только в том случае, если сопоставлено другое целое слово (когда несколько слов). Это цель.

Моя проблема в том, что неправильно сообщается, что в этом фрагменте кода есть совпадение:

 if (matches == true) {
    alert('matched true')  //incorrectly reports  
 } else {
    alert('matched false') //incorrectly reports  
 }

пока этот фрагмент кода сообщает правильно:

if (regex.test($(this).text()) === true) {
    matches = true;
    // alert('tis true') //correctly reports  
} else {
       matches = false;
       // alert('tis false') //correctly reports   
}

Почему он не сообщает правильно? (правильно, как в: что я хочу сообщить)

Если кто-то достаточно хорош в Javascript, чтобы увидеть, что я пытаюсь сделать, и знает, как мне помочь, это было бы замечательно. Я пытаюсь пройти через это, потому что осталось изменить всего несколько вещей.

Answer 1

Мне кажется, проблема в том, что вы перебираете все элементы списка с помощью:

$("#list li").each(function() {

, а затем на каждой итерации вы перебираете список слов с помощью:

$.each(inputWords, function(i, a_filter) {

, а затем во внутреннем цикле вы снова обрабатываете все li элементов с помощью:

var containing = $('#list li').filter(function () {

Итак, во внутренней части вы запутываетесь простос чем ты имеешь дело.Я думаю, что вам нужно выполнить цикл по каждому элементу, проверить, нет ли у него совпадений со списком входных слов, а затем спрятать или показать этот элемент соответствующим образом.Примерно так:

var inputWords = inputValue.toLowerCase().split(/[\s,]+/);

$("#list li").each(function() {
    var matches = false,
        $currentElement = $(this);

    $.each(inputWords, function(i, a_filter) {
        if ($.trim(a_filter)==="") return; // skip blank items

        var regex = new RegExp('\\b(' + a_filter + ')(s|es|\'s)?\\b', 'i');
        if (regex.test($currentElement.text())) {
            matches = true;
            return false;  // return false breaks out of the $.each
                           // (no need to continue once a match is found)
        }
     });

     if (matches)
        $currentElement.slideDown(400);
     else
        $currentElement.slideUp();
});

Рабочая демонстрация: http://jsfiddle.net/QhL2M/19/

РЕДАКТИРОВАТЬ: также способ, которым вы разделяли список входных слов, не работал для меня:

var inputWords = $('.filterinput').text().toLowerCase().split(/[\s,]+/);
// I've changed that to
var inputWords = inputValue.toLowerCase().split(/[\s,]+/);

Вы не хотите использовать .text() на входе, и в любом случае inputValue уже был инициализирован ранее для хранения текста этого ввода.Мой код выше и демо были обновлены.

Answer 2

Дайте мне знать, если вы пытаетесь это сделать ( jsFiddle пример ):

(function($) {
    function fiKeyup() {
        var inputValue = $(this).val();
        if (inputValue.length > 2) {
            var inputWords = inputValue.split(/[\s,]+/ig);
            var containing = $('#list li').filter(function () {
                var ret = false;
                var text = $(this).text().toLowerCase();
                $.each(inputWords, function(i, a_filter) {
                    var regex = new RegExp('\\b(' + a_filter + ')(s|es|\'s)?\\b');
                    if(regex.test(text)) {
                        return !(ret = true);
                    }
                });
                return ret;
            });

            $('#list li').not(containing).slideUp();
        } else {
            $('#list li').slideDown();
        }
        return false;
    };
    var timeout;

    $('.filterInput').keyup(function() {
        var that = this;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            fiKeyup.call(that);
        }, 500);
    });

}(jQuery));