Jquery / Javascript regex: фильтр, позволяющий вводить несколько тегов для выбора этой категории, jsfiddle - PullRequest
Новая
       9

Jquery / Javascript regex: фильтр, позволяющий вводить несколько тегов для выбора этой категории, jsfiddle

3 голосов
/ 29 апреля 2011

http://jsfiddle.net/nicktheandroid/AtkNW/

Цель состоит в том, чтобы взять значение текстового поля, в котором будет несколько ключевых слов, разделенных пробелом, а затем отфильтровать список, чтобы показать элементы, которые содержат всеэти ключевые слова.Прямо сейчас я могу только ввести эти ключевые слова, так как они перечислены в <span class="tags">.

Я хотел бы иметь возможность набирать их, но не по порядку, и иметь в своем распоряжении только элемент со всеми этими ключевыми словами в качестве видимого элемента.Я думаю, мне, возможно, придется использовать .split(" ") где-то здесь ... хм ... 

<li>entertainment
    <span class="tags">tv radio dance opera</span>      
</li>

Jquery: 

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    var length = $(this).val().length;
    if (length > 1) {
        $(".filtered li").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).addClass("hidden");
            } else {
                $(this).removeClass("hidden");
                count++;
            }
        });
    } else {
        $('.filtered li').removeClass("hidden")
            count++;
    }
    $("#filter-count").text(count);
});

Кто-нибудь знает, как это сделать?

1 Ответ

2 голосов
/ 29 апреля 2011

Точно так же, как вы и подозревали, вам нужно использовать String.split () для разделения ввода пользователя и сопоставлять слова один за другим с вашими тегами.

Модифицированный код как: 

$("#filter").keyup(function() {
    var filter = $(this).val(),
        count = 0;
    var length = $(this).val().length;
    if (length > 1) {
        var filter_tags = filter.split(" "); // Split user input by spaces
        $(".filtered li").each(function() {
            var $this = $(this);
            var matches = true;
            // Match each splitted string against the whole tags string
            $.each(filter_tags, function(i, a_filter) {  
                if ($this.text().indexOf(a_filter) === -1) {
                    matches = false;
                }
            });
            if (matches) {
                $this.removeClass("hidden");
                count++;
            } else {
                $this.addClass("hidden");
            }
        });        
    } else {
        $('.filtered li').removeClass("hidden")
        count++;
    }

    $("#filter-count").text(count);
});

Возможно, вам понадобится передать интеллектуальное регулярное выражение в разбиение, чтобы в качестве разделителей можно было использовать как пробелы, так и запятые.

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

...