Ajax Livesuche

[Ice Man]

Bin dabei, damit etwas zu experimentieren.

Bisher hatte ich eine Suchzeile, da tippte man was ein, und wurde auf eine Ergebnis Seite geleitet, wo die Ergebnisse angezeigt wurde.

Nun wollte ich das mal mit einer Ajax Livesuche testen.
Die Funktion geht, tippt man was ein, kommen die ergebnisse.

Nur leider ist die Ergebnissanzeige nicht so schon.
Ich muss dafür vorher eine Feld definieren, von sagen wir 60px in der höhe. Wenn niemand sucht, ist das Feld leer aber vorhanden, also nee Tote Fläche.

Bei idealo.de poppt bei der Livesuche eine Zusatztabelle auf.
Die Seite ansich wird nicht verändert.

Da ich jetzt keinen Plan hab, wie diese Funktion lautet, weis ich auch nicht, wonach sich Googlen soll.

Jemand ne Idee, wie das heißt ?
Für den Anfang würde es schon reichen, wenn das div Feld erst bei einem Ergebniss sich vergrößert

[Melegrian]

Wie das nun im Detail programmiert wurde, ist für mich nicht auf dem ersten Blick ersichtlich, zumal da wohl auf jQuery aufgebaut wurde und da könnte einiges anders aussehen. Allgemein handelt es sich aber bei allen Mausbewegungen und Tastatureingaben um Events und je nach Anwendung sind da die unterschiedlichen EventHandler ein Ausgangspunkt.

Für erste Experimente würde ich die Eventhandler onkeydown und onkeypress empfehlen:

https://de.selfhtml.org/javascript/spra ... andler.htm

[CyberNibbler]

[...]
Da ich jetzt keinen Plan hab, wie diese Funktion lautet, weis ich auch nicht, wonach sich Googlen soll.

Jemand ne Idee, wie das heißt ?[...]

Thread-Titel: Ajax Livesuche

[Beloe007]

Google: ajax display none fadein

Sollte helfen, falls du jquery nutzt.

[Melegrian]

Wenn ich nach "Ajax Livesuche" suche, kommt da auf Platz 1 eigentlich schon ein recht gut dokumentiertes Beispiel, welches sich beliebig anpassen lassen sollte. Statt onkeydown oder onkeypress wird im Beispiel onkeyup benutzt.

So bald ein Buchstabe eingegeben wurde, ruft der EventHandler onkeyup die Funktion "eingabeAuswerten" auswerten auf, der Du dann beibringen kannst, was sie erledigen soll.

https://tutorials.designnation.de/works ... -Livesuche

Falls Du jQuery benutzen solltest, da fehlt mir Überblick.

[Ice Man]

Die Umsetzung funktioniert ja schon bestens.

Aber ich wollte wegen DC nicht die Inhalte direkt auf der Seite ausgeben.
Wer weiß, was der Google Bot von selbst in die Suchleiste schreibt.

Deswegen fand ich diese "aufpoppende" Tabelle recht gut.
Da es so keine DC Gefahr gibt

[Melegrian]

Request für die aufpoppende Tabelle: "https://ws.i.....de/.../.../.../suggest?site=1&..."
Request bei Benutzung des Buttons: "https://www.i.....de/.../....html?q=..."

Brauch jetzt alles nicht richtig zu sein, eher unwissend und milchmädchenhaft, doch meiner Meinung nach wird beides als Tabelle (Div) eingeblendet, nur dass die Response für den ersten Request nur per JavaScript ausgegeben wird und somit bei Blick in den Quelltext nicht sichtbar ist und die Response für den zweiten in den Quelltext geschrieben wird.

Und was man per JavaScript verstecken möchte, dass lagert man aus in eine datei.js, bindet die im Head ein gibt den Inhalt an einer beliebigen Stelle im Dokument aus. Damit ist im Quelltext erst einmal nichts mehr zu lesen, doch was Google lesen kann, das ist eine andere Seite.

[Melegrian]

Habe nun auch mal etwas experimentiert. Nach Eingabe des ersten Buchstabens wird das Ergebnis von kleinetab.php bei id="D1" ausgeben und nach Betätigung des Buttons das Ergebnis von grossetab.php bei id="D2". Entsprechend formatiert würde es dann so aussehen, als wäre die kleine Tabelle eine Erweiterung des Eingabefeldes.

Da gehören sicherlich noch einige Sicherheitsabfragen mit hinein, die habe ich mir jetzt mal erspart. Überlege noch ob ich das noch etwas zu einem Demo ausbaue, doch dann müsste da noch ein Zählwerk mit rein, um die mögliche Anzahl an Request zu begrenzen.

Was Du nun mit kleinetab.php und grossetab.php anfängst, da sind der Kreativität ja kaum Grenzen gesetzt, könnte mir jedoch vorstellen, dass kleinetab.php auf einen Index zugreift und nur mit grossetab.php die ganze Datenbank durchsucht wird oder so ähnlich.

Wenn die große Tabelle im Quelltext sichtbar sein soll, jetzt sind ja beide nicht sichtbar, dann müsste die Ausgabe statt mit document.getElementById("D2").innerHTML mit PHP erfolgen und die Seite müsste neu geladen werden.

Jedenfalls funktioniert es soweit erst einmal:

Code: Alles auswählen

<!DOCTYPE html>
<html>

<head>
<title>Nur ein Test</title>
<script type="text/javascript">

var testD = null;
    testD = new XMLHttpRequest&#40;&#41;;
	

function schreibekleineTAB&#40;&#41; &#123;

	if &#40;testD.readyState == 4&#41; &#123;

	document.getElementById&#40;"D1"&#41;.innerHTML = testD.responseText;
&#125;&#125;

function schreibegrosseTAB&#40;&#41; &#123;

	if &#40;testD.readyState == 4&#41; &#123;

	document.getElementById&#40;"D2"&#41;.innerHTML = testD.responseText;
&#125;&#125;

function kleineTAB&#40;&#41; &#123;

    var werte = escape&#40;document.getElementsByName&#40;"voraus"&#41;&#91;0&#93;.value&#41;;
	
	testD.open&#40;"GET", "kleinetab.php?suche="+ werte&#41;;	
	testD.onreadystatechange = schreibekleineTAB;  
	testD.send&#40;null&#41;;
&#125;

function grosseTAB&#40;&#41; &#123;

    var werte = escape&#40;document.getElementsByName&#40;"voraus"&#41;&#91;0&#93;.value&#41;;
	
	testD.open&#40;"GET", "grossetab.php?suche="+ werte&#41;;	
	testD.onreadystatechange = schreibegrosseTAB;  
	testD.send&#40;null&#41;;
&#125;
</script>
</head>

<body>
<div style="text-align&#58; center">
<h1>Nur ein Test</h1>

<div style="margin&#58; 0px">
  <input type="text" name="voraus" value="" size="30" onkeyup = kleineTAB&#40;&#41;;>
  <input type="submit" value="Senden" onclick = grosseTAB&#40;&#41;;>
</div>
  <div style="margin&#58;  0px" id="D1"></div>
  <div style="margin&#58; 30px" id="D2"></div>
</div>
</body>
</html>

[mano_negra]

um was gehts hier eigentlich?
um die darstellung der suchergebnisse oder die suchvorschläge?

[Melegrian]

Um die Suchvorschläge, die in der kleinen Tabelle unterhalb des Suchfeldes nach Eingabe des ersten Buchstaben eingeblendet wird. Aufruf
bei leerer Seite und dann nach dem ersten Buchstaben:

https://www.idealo.de/preisvergleich/Ma ... ry.html?q=

[mano_negra]

sowie es google auch macht?
das nennt sich autosuggest bzw. autocomplete.
hab grad selber so ein script angepasst.
hier gibt es z.b. eine übersicht verschiedener scripts.
https://webtecker.com/2008/03/10/10-aut ... x-scripts/
selber habe ich das 8. in dieser liste im einsatz https://www.brandspankingnew.net/archiv ... plete.html

[Melegrian]

Zwei Scriptbeispiele für autocomplete habe ich noch gefunden, doch die setzen immer auf Frameworks auf.

Mit jQuery: https://www.easy-coding.de/wiki/html-aj ... query.html

Mit Scriptaculous: https://www.easy-coding.de/wiki/html-aj ... lo-us.html

Wollte mich auch schon mal mit jQuery beschäftigen, hebe ich mir wohl auf später auf.

[Ice Man]

hab gestern bemerkt, das DC wohl doch kein Problem ist.

Da die Inhalte erst später per JS + DIV eingefügt werden.
Somit stehen die Suchergebnisse nicht im Quelltext.

Fazit keine Gefahr.

Danke an alle die geholfen haben, vielleicht hilft der Beitrag auch anderen noch