Dynamische Suchfunktion zum Anzeigen/Verbergen von Divs

Question

Dies ist meine erste Post auf StackOverflow. Ich hoffe, es geht nicht furchtbar schief.

<input type="Text" id="filterTextBox" placeholder="Filter by name"/> 
<script type="text/javascript" src="/resources/events.js"></script> 
<script> 
$("#filterTextBox").on("keyup", function() { 
    var search = this.value; 
    $(".kurssikurssi").show().filter(function() { 
     return $(".course", this).text().indexOf(search) < 0; 
    }).hide();   
}); 

</script> 

Ich habe eine Javascript-Schnipsel wie diese auf meinem Schulprojekt, die hier gefunden werden kann: http://www.cc.puv.fi/~e1301192/projekti/tulos.html

So wird die Suchleiste am unteren Rand soll divs filtern und nur diejenigen anzuzeigen, die bestimmte enthalten Stichwort. (zB, wenn Sie Digital Electronics eingeben, werden nur Divs angezeigt, die den Text "Digital Electronics II" und "Digital Electronics" enthalten. Wenn ich jetzt zufälliges Kauderwelsch tippe, verbirgt es alles, was es soll, aber wenn ich Typ am Anfang eines Kurses Namen, es wird nicht die Kurse verstecken, das den bestimmten Text-String enthält nicht

Hier ist ein Beispiel, die ich verwenden (was gut funktioniert.): http://jsfiddle.net/Da4mX/

Schwer zu erklären, Aber ich hoffe, dir wird klar, wenn du die Suchfunktion auf meiner Seite ausprobierst.Auch ich bin ziemlich neu in Javascript, und ich bekomme den Teil, wo du den String der Suchbox als var search einstellst, den Rest bin ich mir nicht so sicher

Bitte helfen Sie mir, das Skript aufzuschlüsseln und möglicherweise darauf hinzuweisen, wo ich falsch liege und wie ich das Problem lösen kann.

Answer 1

in Ihrem Fall denke ich Ihnen zeigen, und die Eltern von Kursen verstecken, so dass Sie

$("#filterTextBox").on("keyup", function() { 
    var search = $(this).val().trim().toLowerCase(); 
    $(".course").show().filter(function() { 
     return $(this).text().toLowerCase().indexOf(search) < 0; 
    }).hide();   
}); 

Answer 2

versuchen können, Sie haben die falschen Elemente zugreifen. Dies sollte funktionieren:

Answer 3

Probieren Sie dies funktioniert jetzt, fügen Sie diesen Code in die Konsole und überprüfen Sie, indem Sie suchen.

$("#filterTextBox").on("keyup", function() { 
 
    var search = this.value; if(search == '') { return } 
 
$(".course").each(function() { 
 
    a = this; if (a.innerText.search(search) > 0) {this.hidden = false} else {this.hidden = true} 
 
}); }) 
 

prüfen und die Suche funktioniert jetzt.

Answer 4

Ihr Problem ist es:

return $(".course", this) 

Von jquery doc: ("course") http://api.jquery.com/jQuery/#jQuery-selection

Internally, selector context is implemented with the .find() method, so $("span", this) is equivalent to $(this).find("span")

Filterfunktion bereits jeweils Elemente dann überprüfen, wenn Sie versuchen, $ setzen in Kontext, es wird alle wieder holen ...

Gültiger Code:

$("#filterTextBox").on('keyup', function() 
{ 
    var search = $(this).val().toLowerCase(); 
    $(".course").show().filter(function() 
    { 
     return $(this).text().toLowerCase().indexOf(search) < 0; 
    }).hide(); 
}); 

In der Tat können Sie alternativ verwenden:() enthält CSS-Selektor, aber ist es nicht für eine große Liste optimiert und Crossbrowser nicht

http://caniuse.com/#search=contains