ajax instant search: resultate löschen?

[leo-magic]

Hallo,

Ich habe mittels jQuery eine "Ajax instant-suche"

Gibt man ins Suchfeld mehr als 2 Zeichen ein, sucht das Script passende Resultate. (search_input.length>2)

Nun aber mein Problem:
Löscht man die Eingabe im Suchfeld passiert bei 2 oder weniger Zeichen nichts mehr (die Resultate werden nicht mehr aktualisiert.)
Ich möchte aber, dass wenn das Suchfeld leer ist, auch keine Resulate mehr angezeigt werden.

Frage: Wie kann man alle Resultate löschen, wenn das Eingabefeld keine Zeichen mehr enthält?

Danke,
Léo

if(search_input.length>2)
{
$.ajax({
type: "GET",
url: "ajax-search.php",
data: dataString,
beforeSend:  function() {

$('input#search_input').addClass('loading');

},
success: function(server_response)
{

$('#searchresultdata').html(server_response).show();

 

[s01iD]

if(search_input.length<2)
   $('#searchresultdata').hide();

 

[leo-magic]

Danke vielmals!

Das Script blendet nun das Resultat einfach aus. Wie kann ich die Resulate ganz "löschen"? Also die Ausgabe wie leeren?

Danke,
Léo

 

[Saugkraft]

Wie wär's mit:

$('#searchresultdata').html('');

oder was vergleichbarem. Ich weiß ja nicht, wie dein HTML Gerüst aussieht, aber letztlich musst du dem Element, in dem die Ergebnisse erscheinen, nur einen leeren String zuweisen.

Oder irgendeinen anderen Inhalt. Zum Beispiel:

$('#searchresultdata').html('<i>Keine Ergebnisse</i>');

 

[leo-magic]

ach, so einfach geht das... Super! Herzlichen Dank!

Gruss,
Léo

 

[Saugkraft]

Jup. Deshalb nimmt man für sowas ja jquery.

Letztlich bedeutet der Code ja nichts anderes als:

jquery: Suche das Element mit der id (# ist der id Selektor) searchresultdata im DOM-Baum und weise dem HTML Inhalt des Elements den Code xy zu.

Auf gleichem Weg kannst du dem Element andere Eigenschaften zuweisen.

Wenn du z.B. das CSS des Elements ändern willst, schreibst du:

$('#searchresultdata').css('font-size:20px;font-weight:bold')

 

[leo-magic]

cool! Danke! Beginne jQuery zu mögen...

 

[Saugkraft]

Ja jquery ist absolute Oberklasse. Die Syntax ist anfangs ein wenig gewöhnungsbedürftig, aber wenn man das Prinzip verstanden hat, kann man tolle Sachen damit machen.

Interessant wird es vor allem, wenn du noch zusätzliche Bibliotheken einbindest. Wenn du zum Beispiel eine lightbox einbindest, kannst du auf ganz simplem Weg aus dem Quelltext des übergeordneten Fensters auf alle Eigenschaften der Unterinstanz (der Lightbox) zugreifen, indem du nach dem Prinzip $.lightbox.element.. vorgehst.

Die Möglichkeiten sind schier unbegrenzt. Außerdem lernt man so sehr viel über die DOM Struktur. Für das Arbeiten mit der DOM Struktur ist es übrigens hilfreich, sich über die Safari Developer Tools die Webinformationen und dort die Elemente anzeigen zu lassen. Falls du Firefox einsetzt, ist hier Firebug das Mittel der Wahl.

 

[leo-magic]

Hm, vielleicht kannst Du mir hier auch noch gleich helfen...

Die Datei, welche bei der Suche die mySQL-Datenbank durchsucht gibt das Resultat ja zurück.
Gibt es allerdings keine Resultate gibt die Datei dies zurück:

else {
        echo '<p class="noitems">Keine Resultate f&uuml;r: "'.$_GET['keyword'].'"</p>';
    }

Wie kann ich in der anderen Datei (wo die Suche eingegeben wird) überprüfen, ob es nun Resultate gegeben hat oder nicht?

Also im Stil von:

if ($results=1)
{
blabla
}
else
{
blabla
}

Danke für die Hilfe!
Léo

 

[Saugkraft]

Das ist eine echt spannende Frage. Ich brainstorme mal etwas, weil die Problematik nicht ganz trivial ist.

Theoretisch geht sowas über eine PHP Session Variable.
<?php
$_SESSION['results'] = "1";
?>

und dann analog in der Hauptseite abfragen:
<?php
if($_SESSION['results'] = "1")
?>

Das Problem ist hier, dass du mit jquery keinen Zugriff auf PHP Session Variablen hast. Damit du die Session Variable überhaupt abfragen könntest, müsstest du die Hauptseite neu laden. Dann führst du das AJAX-Prinzip aber ad absurdum. Insofern keine gute Lösung.

Mit jquery gibt es keine Lösung über Variablen weil Javascript im Browser ausgeführt wird und auch nur da der jeweiligen Seite zur Verfügung steht. Du könntest aber in der Suchseite ein Element einbauen, das in der Hauptseite abgefragt wird. Dann hast du dieses Element aber auch gleichzeitig im Ergebnisfeld stehen. Mit etwas tricksen ist das aber auch kein Problem.

In jquery kannst du dann prüfen, ob dieses Element existiert:

if ($(selector).exists()) {
    // Do something
}

Nun tricksen wir etwas. Wenn du Ergebnisse hast gibst du dem Element einen entsprechenden Namen:

echo '<p id="[B]someitems[/B]">Resultate:...</p>';

Wenn du keine hast:

echo '<p id="[B]noitems[/B]">Keine Resultate:...</p>';

In jquery kannst du dann überprüfen, ob #someitems existiert oder nicht.

Ich finde es ein bisschen gurkig programmiert, sollte aber seinen Dienst tun.

Ganz wichtig: Wenn man PHP und Javascript einsetzt, neigt man manchmal dazu, beides vermischen zu wollen. PHP wird aber am Server ausgeführt, Javascript im Browser. Die Kommunikationsmöglichkeiten beider Sprachen sind also arg eingeschränkt. Von Javascript nach PHP ist kein Problem, weil du dann mit POST arbeiten kannst. Umgekehrt ist mir aber noch keine wirklich schöne Lösung über den Weg gelaufen.

 

[leo-magic]

Hmm, habe ich gleich ausprobiert...

if ($("#receipttotal").exists()) {
$('#detail').html('Ergebnis anwählen für Details...');
}

funktioniert leider nicht. Es wird nicht ausgegeben. Vielleicht liegt es daran, dass das Div erst im Nachhinein per Ajax "geschrieben" wird?

Gruss,
Léo

 

[leo-magic]

Hab's, so klappts:

if ($("#receipttotal").length)

Danke!!
Léo

 

[Saugkraft]

Hab ich ganz vergessen.. Setz mal in dem AJAX Request async: false. So wird vermieden, dass die Funktion weiterarbeitet während die Anfrage noch aussteht.

 

[macfan97]

Aber wenn sie auf Off steht, ist das komplette User Interface lahm gelegt, bis der Request zurück kommt

 

[Saugkraft]

Das sollte ja hoffentlich nicht ewig dauern.

Zurück kommt übrigens die Response. Nicht der Request.

 

[s01iD]

am besten zeigst du währenddessen noch einen load indicator an ...

 

[Saugkraft]

Sag ihm auch wie.

Wenn die Funktion aufgerufen wird, ersetzt du den Inhalt des divs durch die Grafik. Sowas zum Beispiel: http://www.crewcheck.org/images/loading.gif
Dann den Ajax Request absetzen und anschließend den Div-Inhalt durch die Ergebnisse ersetzen.

 

[s01iD]

Ich finde die jQuery-Dokumentation ja so gut, dass man all diese Probleme mit ein wenig Lesen hätte selbst lösen können ;o

 

[Saugkraft]

Mag sein aber manchmal hilft ein Denkanstoß. Im übrigen reicht es nicht, nur die Doku zu lesen. Man muss das Konzept auch verstehen. Und das ist in der jquery Doku nicht erklärt.