Сделать JQuery: Содержит принимать несколько значений

Question

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

jQuery.expr[':'].Contains = function(a,i,m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; 
}; 

var $section = $('section'); 
var $noresults = $('#noresults'); 

$noresults.hide(); 

$('#search').bind('keyup focus', function() { 
    var input = $(this).val(); 

    if(input) { 
     $section.hide(); 
     var result = $("section:Contains('"+input+"')"); 

     if(result.length) { 
      $noresults.hide(); 
      result.show(); 
     } 
     else { 
      $noresults.show(); 
     } 
    } 
    else { 
     $noresults.hide(); 
     $section.show(); 
    } 
}); 

Он работает нормально, но меня попросили сделать его принимать несколько значений. При этом текущем фильтре, если я нахожу «ABC», будут отображаться только разделы, содержащие строку «ABC». Но если я нахожу «ABC DEF», ничего не будет отображаться, хотя эти две строки содержатся в одном или нескольких разделах документа.

То, что я хотел бы получить это фильтр, который отображает только разделы, содержащие строки «ABC»и«DEF» когда я типа «ABC DEF» в поле ввода.

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

$('#search').bind('keyup focus', function() { 
    var input = $(this).val(); 

    var arr = input.split(/[ ,]+/); 

    var len = arr.length; 

    console.log(arr); 
    console.log(len); 

    for(var i=0; i<len; ++i) { 
     if(input) { 
      $section.hide(); 

      var result = $("section:Contains('"+arr[i]+"')"); 

      if(result.length) { 
       $noresults.hide(); 
       result.show(); 
      } 
      else { 
       $noresults.show(); 
      } 
     } 
     else { 
      $noresults.hide(); 
      $section.show(); 
     } 
    } 
}); 

Большое спасибо за помощь.

Answer 1

• Cache jQuery(a).text().toUpperCase()
• Split запрос пропуска
• Loop по раздельным запросу, тестирование каждому из
• Если вы нашли элемент запроса, который не содержится, возвращать ложные
• В конце петли, return true

Также обратите внимание, что если вы не хотите изменять свой пользовательский селекторный код, вы также можете написать section:Contains('ABC'):Contains('DEF').

EDIT: Перевод:

jQuery.expr[':'].Contains = function(a,i,m) { 
    var text = jQuery(a).text().toUpperCase();   // Cache `jQuery(a).text().toUpperCase()` 
    var words = m[3].split(/\s+/);      // Split query by whitespace 
    for (var i = 0; i < words.length; i++) {   // Loop over the split query, testing each one 
    if (-1 == text.indexOf(words[i].toUpperCase())) { // If you find a query member that is not contained, 
     return false;         // return false 
    } 
    } 
    return true;          // At loop end, return true 
}; 

Answer 2

Похоже, что это не возможно, чтобы выбрать несколько критериев из одного ": содержит" метод (http://forum.jquery.com/topic/how-to-get-contains-to-work-with-multiple-criteria).

Цепочка: содержит метод будет делать то, что вы хотите достичь:

$('section:contains("ABC"):contains("DEF")'); 

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

Вот jsfiddle, который должен делать то, что вы после: http://jsfiddle.net/sKgpj/