jQuery 使用逗号分隔关键字的文本字段实时搜索

Question

我正在尝试使用 jQuery 和逗号分隔的关键字创建实时搜索。如果我只将文本字段中的完整字符串作为关键字，搜索就像一个魅力。

代码（适用于单个关键字）：

jQuery("#artikelfilter").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = jQuery(this).val(), count = 0;

    // Loop through the comment list
    jQuery("#liste-alles li").each(function(){

        // If the list item does not contain the text phrase fade it out
        if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
            jQuery(this).fadeOut();

        // Show the list item if the phrase matches and increase the count by 1
        } else {
            jQuery(this).show();
            count++;
        }
    });

    // Update the count
    var numberItems = count;
    jQuery("#filter-count").text("Number of Comments = "+count);
});

我现在要做的是用多个关键字进行过滤。我考虑过将字符串拆分成一个数组并循环遍历关键字。问题是，我收到大量 jQuery 事件，因此浏览器无法再处理它。

有什么聪明的方法可以使这项工作有效吗？

多个关键字的代码（无效）：

jQuery("#artikelfilter").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var string_filter = jQuery(this).val();
    var array_filter = string_filter.split(',');

    // Loop through the comment list
    jQuery("#liste-alles li").each(function(){

        jQuery.each( array_filter, function( intValue, currentFilter ) {
            // If the list item does not contain the text phrase fade it out
            if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
                jQuery(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                jQuery(this).show();
            }
        });

    });

});

谢谢！

Answer 1

试试这个

jQuery.each( array_filter, function( intValue, currentFilter ) {
    jQuery("#liste-alles li:contains("+currentFilter +")").show();
    jQuery("#liste-alles li:not(:contains("+currentFilter +"))").fadeOut();

});

或这个

var regex = new RegExp(filter, "i"));

jQuery.each( array_filter, function( intValue, currentFilter ) {

   jQuery("#liste-alles li").filter(function () {return regex.test($(this).text()); }).show();
   jQuery("#liste-alles li").filter(function () {return !regex.test($(this).text()); }).fadeOut();

});

jQuery 使用逗号分隔关键字的文本字段实时搜索

jQuery text-field live-search with comma-separated keywords

search

jquery

filter

textinput

keyword-search