Автозаполнение (AutoFilter?) С использованием делегата jQuery

Question

$('#container form').delegate('#addSearch', 'keyup', function(e) { 
        var tmpVAL = $('#addSearch').val();
        $('.w').each(function() {
            var tmpHTML = $(this).html();
            if (tmpHTML == tmpVAL) {
                $(this).fadeIn(250);
            } else if (tmpVAL.length < 1) {
                $(this).fadeIn(250);
            } else {
                $(this).fadeOut(250);
            }
        });
    });

и #addSearch - это <input type="text">.

Итак, моя проблема в том, что; это, очевидно, будет возвращать только результаты, которые точно соответствуют tmpVAL - как бы я позволил, чтобы каждая буква изменила результат поиска.

, например

Я печатаю N
это приходит с No, Not, Nothing, Nothingness

Я печатаю NOT
это приходит с Not, Nothing, Nothingness

Любая помощь будет признательна, я думаю, что это будет RegEx?

Answer 1

• ДЕМО http://so.devilmaycode.it/autocomplete-autofilter-using-jquery-delegate

$(function() {
    $('#container form').delegate('#addSearch', 'keyup', function(e) {
        var tmpVAL = $('#addSearch').val();
        $('.w').each(function() {
            var tmpHTML = $(this).text();
            var subSection = tmpHTML.substring(tmpVAL.length, 0);
            if (subSection == tmpVAL && tmpVAL != '' ) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

Answer 2

Вы можете использовать регулярное выражение, но я думаю, что это может быть излишним.Вы можете просто использовать indexOf:

$('#container form').delegate('#addSearch', 'keyup', function(e) {
    var tmpVAL = $('#addSearch').val().toLowerCase();
    $('.w').each(function() {
        var tmpHTML = $(this).html().toLowerCase();
        if (tmpHTML.indexOf(tmpVAL) >= 0) {
            $(this).fadeIn(250);
        } else if (tmpVAL.length < 1) {
            $(this).fadeIn(250);
        } else {
            $(this).fadeOut(250);
        }
    });
});

Рабочий пример: http://jsfiddle.net/andrewwhitaker/PRyvU/

Вот альтернативное решение, в котором не используется .each():

$('#container form').delegate('#addSearch', 'keyup', function(e) {
    var tmpVAL = $('#addSearch').val().toLowerCase();
    var $words = $(".w");
    var contains = function(haystack, needle) {
        return haystack.indexOf(needle) >= 0;
    };

    if (tmpVAL.length < 1) {
        $words.fadeIn(250);
    }
    else {
        $words.filter(function() {
            return !contains($(this).html().toLowerCase(), tmpVAL);      
        }).fadeOut(250);
        $words.filter(function() {
            return contains($(this).html().toLowerCase(), tmpVAL);
        }).fadeIn(250);
    }
});

http://jsfiddle.net/andrewwhitaker/EyJ6b/