jquery show div nur, wenn keine Ergebnisse in der Suche zurückgegeben

Question

Ich habe den folgenden Code, den ich brauche eine Anleitung mit bitte. Ich brauche das # no-results Element, das nur angezeigt wird, wenn keine Ergebnisse gefunden werden. Derzeit zeigt es IF Ergebnisse gefunden werden.

$('#no-results').hide(); 
     $('#video-search-text').keyup(function() { 
      $('.video-search').hide(); 
      $('#no-results').css("display", "none"); 
      var txt = $('#video-search-text').val(); 

      $('.video-search').each(function() { 
       if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) { 
        $(this).show(); 

       } 
       else { 
         $('#no-results').css("display", "block"); 

       } 
      }); 

     }); 

ich habe folgende JSFiddle für Bequemlichkeit erstellt. Danke

Answer 1

Entfernen Sie die Überprüfung für kein Ergebnis von innerhalb der für jede Schleife, und platzieren Sie es, nachdem die Suche abgeschlossen ist. wie

$('#no-results').hide(); 
$('#video-search-text').keyup(function() { 
    $('.video-search').hide(); 
    $('#no-results').css("display", "none"); 
    var txt = $('#video-search-text').val(); 
    var resultCount = 0; 
    $('.video-search').each(function() { 
     if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) { 
      $(this).show(); 
      resultCount++; 
     } 
    }); 

    if (resultCount == 0) { 
     $('#no-results').css("display", "block"); 
    } 

}); 

Answer 2

James gab Ihnen eine gute Lösung. Grundsätzlich ist das Problem aus dieser Schleife nach ‚abc‘ in Ihrem jsFiddle, wird es eine Übereinstimmung mit der ersten <h1> finden Sie

$('.video-search').each(function() 

Angenommen kommt. Dadurch wird Ihr erster Block betreten und "Ergebnisse nicht gefunden" wird nicht angezeigt.

Da Sie jedoch für jedes Element eine Schleife erstellen, vergleicht es 'abc' mit 'def' und tritt dann in den else-Block ein. Das gleiche gilt für den Vergleich mit 'Ghi'.