jQuery für Suche nutzen...

[C64]

Hallo zusammen,

ich hab mal wieder ein kleines privates Projekt am Start und dazu ne Frage

Folgende Situation:
Ich habe eine Seite, auf der zunächst alle in einer Datenbank vorhandenen Personen in einem div mit Bild und einer kurzen Beschreibung angezeigt werden sollen (schaut dann ähnlich aus wie Visitenkarten).
Oben auf der Seite befindet sich außerdem ein Container für die Suche, in dem man diverse Dinge anhaken kann (also Haken setzen für zB "männlich" oder "weiblich" o.ä.).

Ist es CSS-valide/möglich die ca. 10-15 Suchkriterien als Klasse den divs der einzelnen Personen zuzuordnen, die aus der Datenbank gelesen werden (also zb. class="mann nett apfel kartoffel") und dann mit jquery beim anhaken des entsprechenden Feldes direkt nur die divs einblenden zu lassen (über show/hide), deren Klasse angehakt ist und die anderen auszublenden?

Dann würde ich den Besuchern nämlich viel Ladezeit, weil ja sowieso alle divs vorher geladen werden sollen und mit der Suche nur eine mögliche Einschränkung der Übersicht ermöglicht werden soll.

Wie könnte ich das Ganze evtl. dann noch für Leute realisieren, die kein Skript aktiviert haben?

Ich hoffe, ich habe mich verständlich ausgedrückt

 

[Toddy]

[...]Ist es CSS-valide/möglich die ca. 10-15 Suchkriterien als Klasse den divs der einzelnen Personen zuzuordnen [...] und dann mit jquery beim anhaken des entsprechenden Feldes direkt nur die divs einblenden zu lassen [...] deren Klasse angehakt ist und die anderen auszublenden?[...]

Möglich ja, auch von Seiten des W3C wüsste ich nicht, was dagegen spricht.

[...]Wie könnte ich das Ganze evtl. dann noch für Leute realisieren, die kein Skript aktiviert haben?[...]

Indem du ein <noscript> bereich setzt hinter die Checkboxen, dort einen Submitbutton einfügst (Das ganze in ein Formular gepackt) und die Suche klassisch auf dem Server durchführst.

LG T.

 

[C64]

Ok, dann sind wir bereits zu zweit mit der Meinung
Ich wollte nur noch mal sicher gehen, weil es ja dann vielleicht doch ein paar mehr Klassen werden.

Jetzt wird das Ganze erst mal für jQuery umgesetzt und dann der NoScript-Bereich hinzugefügt...
Freu mich schon aufs Tüfteln

Sollte noch jemand anderer Meinung sein oder Einwände haben oder andere Ideen/Vorschläge zur Umsetzung haben, freu ich mich immer über Kommentare!

 

[C64]

So, jetzt hab ich ein kleines Problem. Vermutlich hab ich nur Tomaten auf den Augen

Ich setze zunächst alle show[k] = 1 und gehe dann alle Felder durch.
Ich schau mit if, ob das k-te gewählt ist und wenn ja, dann überprüfe ich noch, ob es aktuell angezeigt wird. Wenn ja, wird es weiterhin angezeigt, wenn nicht, wird nichts geändert.
Wenn es abgewählt ist, wird es versteckt und das aktuelle show auf 0 gesetzt, damit es, wenn es bei einer späteren Box wieder ins "Gezeigt-Raster" fällt nicht wieder angezeigt wird.

Aber irgendwie mag es nicht

(sind aktuell nur 2 Testboxen, die anderen werden mit php erzeugt, sobald das Skript funktioniert.

<script type="text/javascript">
show = new Array();
$(document).ready(function(){
$(".checking").click(function(){
var k=0;
while(k<24){
var k = k+1;
show[k]=1;
}
if ($("#w").is(":checked")) {
if(show[1]=1) {
$(".w").show("fast");}
else{}
}
else { $(".w").hide("fast");
show[1]=0;
}
if ($("#m").is(":checked")) {
if(show[2]=1) {
$(".m").show("fast");}
else{}
}
else { $(".m").hide("fast");
show[2]=0; }';
});
});
</script>

Edit: ich hab den Übeltäter gefunden - Tomaten auf den Augen!!! Da hatte sich ein '; vom php mit eingeschlichen

 

[Toddy]

Alternativ müsste es auch möglich sein, dass du der checkbox ein onclick Ereignis zuweist.

onclick="$('.class').toggle('fast');"

oder so

 

[C64]

Passt, ich hab die Lösung bereits gefunden. Für alle die es mal interessiert.

Das hab ich mal zusammengecoded:

<script type="text/javascript">
$(document).ready(function(){
$(".checkingor").click(function(){
var x=0;
$(".kuenstler").hide(0);
<?php
$t=0;
while ($t<22) {
$t++;
echo 'if ($("#angebot'.$t.'").is(":checked")) {
$(".angebot'.$t.'").show(0);
x=1;}
else {}';

};
?>
if ($("#w").is(":checked")) {if (x==0) {$(".w").show(0);}}
else {$(".w").hide(0);}
if ($("#m").is(":checked")) {if (x==0) {$(".m").show(0);}}
else {$(".m").hide(0);}
});
});
</script>