Die Eingabe erkennt nicht, dass es leer ist, wenn Sie Text mit "Strg + a + Rücktaste" entfernen

Question

Ich mache einige einfache div Filterung mit jQuery und Eingabefeld. Es funktioniert, aber es erkennt nicht, dass es leer ist, wenn ich die Eingabe mit "Ctrl + a + Rücktaste" entfernen, mit anderen Worten, wenn ich den gesamten Text auswählen und entfernen. Was verursacht das?

Es ist nicht neu divs zurück auf Standard, wenn Sie die Tastaturbefehle, aber geht zurück zum normalen, wenn Sie Backspace jedes Zeichen.

Dies ist, wie ich es tun:

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis.length == 0) { 
     $('.card').show(); 
    } else { 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide(); 
     }); 
    }; 
}); 

Answer 1

Ihr if Block, der die leere Zeichenfolge behandelt wird nicht angezeigt die gleichen Elemente, die der else Block verbirgt. Der Baustein else ruft .parent() auf, der Baustein if jedoch nicht.

So ist der else Fall zeigt oder versteckt die Mutter jedes .card Element, aber der if Fall zeigt die .card Elemente selbst — ohne ihre Eltern Einblenden. Sehen Sie meine Kommentare zum Code hinzugefügt (I umformatiert auch den bedingten Ausdruck in den else für Klarheit):

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis.length == 0) { 
     // Show all of the .card elements 
     $('.card').show(); 
    } else { 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      // Show or hide the *parent* of this .card element 
      text.indexOf(valThis) >= 0 ? 
       $(this).parent().show() : 
       $(this).parent().hide(); 
     }); 
    }; 
}); 

Da es wie der Nicht-leer-String Fall klingt richtig funktioniert, soll es nur eine Frage sein, Hinzufügen .parent() im if Block, so dass es die anderen Spiele:

$('#brandSearch').keyup(function() { 
    var valThis = $(this).val().toLowerCase(); 
    if (valThis.length == 0) { 
     // Show the parent of each .card element 
     $('.card').parent().show(); 
    } else { 
     // Show or hide the parent of each .card element 
     $('.card').each(function() { 
      var text = $(this).text().toLowerCase(); 
      text.indexOf(valThis) >= 0 ? 
       $(this).parent().show() : 
       $(this).parent().hide(); 
     }); 
    }; 
}); 

Dies ist die Art von Situation, in der Vertrautheit mit Debugging-Tool Ihres Browsers große Zeit auszahlen würde. Die Methoden .show() oder manipulieren das DOM, und mithilfe des DOM-Inspektors können Sie leicht erkennen, welche Elemente ausgeblendet und angezeigt werden.

In der Tat, als eine Lernübung empfehle ich, den Fehler vorübergehend zu beheben, indem Sie zu Ihrem ursprünglichen Code zurückkehren, und öffnen Sie dann den DOM-Inspektor und sehen, wie es das Problem aufdeckt. Während Sie dort sind, können Sie auch den JavaScript-Debugger und andere Tools ausprobieren.

Wenn Sie Chrome verwenden, ist hier ein introduction to the Chrome Developer Tools. Andere Browser haben ähnliche Tools und Dokumentation für sie.

Answer 2

Es scheint ganz gut zu funktionieren:

$('#brandSearch').keyup(function() { 
 
    var valThis = $(this).val().toLowerCase(); 
 
    if (valThis.length == 0) { 
 
     $('.card').show(); 
 
     console.log("input is empty"); 
 
    } else { 
 
     console.log("input is not empty");     
 
     $('.card').each(function() { 
 
      var text = $(this).text().toLowerCase(); 
 
      (text.indexOf(valThis) >= 0) ? $(this).parent().show(): $(this).parent().hide(); 
 
     }); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="brandSearch">