SQL-Query ausführen nach Eingabe in Textfeld

Rigoo

Rigoo

Grünschnabel
Hallo zusammen,

vermutlich ist mein Anliegen (als JS/Ajax-Anfänger) sehr speziell, aber vielleicht findet sich ja jemand, der eine (einfache?) Lösung dafür hat.

Ausgangspunkt:

Eine Tabelle mit 2 Spalten. In der linken Zelle ein Eingabefeld, in das der Nutzer eine Eingabe tätigt, in der rechten Zelle soll später die Ausgabe erfolgen.

Beispiel:
Code: 
<table>
	<tr>
		<td><input type="text" value="Benutzereingabe" /></td>
		<td>Hier erfolgt die Ausgabe</td>
	</tr>
</table>

Was soll genau passieren?

Gibt der Nutzer im Textfeld einen Inhalt ein, soll in der rechten Zelle eine Ausgabe erfolgen. Genauergesagt soll also "live" ein SQL-Query ausgeführt werden und in der rechten Zelle (je nach Benutzereingabe) ein Bild ausgegeben werden - quasi eine Suchfunktion und das Bild wird direkt rechts ausgegeben.

Wärend der Eingabe wäre es ganz toll, wenn eine "Laden"-Grafik angezeigt wird, aber eben nur, sofern eine Eingabe erfolgt (da es mehrere Zeilen mit Eingabefeldern gibt, später werden die Eingaben anderweitig weiterverarbeitet). Sofern nichts gefunden wird (nach X Sekunden Lade-Grafik) sollte ein Hinweis "nichts gefunden" angezeigt werden.

Das SQL-Query ist nicht das Problem, mein Problem ist lediglich die Umsetzung mit JS/Ajax, das bei Eingabe im <input>-Feld automatisch ein SQL-Query ausgeführt wird und eine entsprechende Ausgabe in der nebenstehenden Zelle generiert.

Vielleicht hat ja jemand eine Lösung.

Danke und Grüße,
Rigoo
 
Ich kann dir nur teilweise helfen weil ich (leider) von Ajax keine Ahnung habe. Aber um die Aktion auszulösen musst du dem Textfeld das onkeyup- bzw. onkeypress-Ereignis zuweisen.

Näheres dazu findest du hier.
 
Hallo zusammen,

danke für die Antworten.

Mittlerweile habe ich mich etwas durch die Ajax-Welt gekämpft und schon einen "Teilerfolg" verbuchen können ;-) Leider aber nur einen Teilerfolg...

Er liest nun die entsprechenden Daten aus der (Test)Datenbank aus und gibt mir den Namen sowie den Dateiname auch korrekt aus, siehe mein Beispiel (ID 1-4 kann eingegeben werden).

Folgendes steht noch auf meinem Zettel:

- Nach Eingabe im Textfeld sollte es eine Zeitverzögerung geben, bis die .php-Datei ausgeführt und der Inhalt ausgegeben wird (so lange soll weiter die Ladegrafik angezeigt werden). (bereits gelöst und unten im Code angepasst)
- Entfernt man seine Eingabe wieder, bleibt der Inhalt derzeit leer, hier sollte wieder die Ladegrafik angezeigt werden

Ich glaube, das wars erstmal - vielleicht kann mir hier ja noch jemand zur Hand gehen oder sogar sagen, was unten totaler Käse ist und/oder wie man das ganze besser machen kann.


Hier einmal mein bisheriger Stand:

ajax.html:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<title>Ajax Test</title>
	<meta http-equiv="content-language" content="de" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="ajax.js"></script>
</head>

<body>

<h2>Ajax Test</h2>

<form name="ajaxform">


<form name="ajaxform">
	<table cellpadding="2" border="1">
		<tr>
			<th colspan="4">Vier Suchfelder…</th>
		</tr>
		<tr>
			<td width="25%" align="center" style="height:100px;">
				<div id="ausgabe">
					<br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
					<span style="font-size:10px;">Warte auf Eingabe</span>
				</div>
			</td>
			<td width="25%" align="center">
				<div id="ausgabe">
					<br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
					<span style="font-size:10px;">Warte auf Eingabe</span>
				</div>
			</td>
			<td width="25%" align="center">
				<div id="ausgabe">
					<br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
					<span style="font-size:10px;">Warte auf Eingabe</span>
				</div>
			</td>
	   		<td width="25%" align="center">
				<div id="ausgabe">
					<br /><img src="http://www.tutorials.de/images/ajax-loader.gif" /><br /><br />
					<span style="font-size:10px;">Warte auf Eingabe</span>
				</div>
			</td>
		</tr>
		<tr>
			<td width="25%" align="center">
				<input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
			</td>
			<td width="25%" align="center">
				<input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
			</td>
			<td width="25%" align="center">
				<input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
			</td>
	   		<td width="25%" align="center">
				<input type="text" onkeyup="bsuche()" name="eingabe" id="eingabe" size="2" />
			</td>
		</tr>
	</table>
</form>


</form>

</body>
</html>

ajax.php:
Code: 
<?php

include('db_conf.inc.php');

if (isset($_GET['eingabe']) && $_GET['eingabe'] != "") {

	$abfrage = "SELECT id,name FROM bilder WHERE id = '".mysql_real_escape_string($_GET['eingabe'])."' AND ausgabe = 1";
	$ergebnis = mysql_query($abfrage) or die;
	$row = mysql_fetch_array($ergebnis);

	$abfrage2 = "SELECT dateiname FROM dateinamen WHERE bild_id = $row[id]";
	$ergebnis2 = mysql_query($abfrage2) or die;
	$row2 = mysql_fetch_array($ergebnis2);

	if ($row) {
		echo 'Name: '.$row['name'].'<br />';
		echo 'Bild: <img src="images/'.$row2['dateiname'].'" />';
	}
	else {
		echo 'Nichts gefunden...';
	}

}

else {
	echo'<br />
<img src="images/ajax-loader.gif" /><br /><br />
<span style="font-size:10px;">Warte auf Eingabe</span>';
}

?>

ajax.js:
Code: 
var timeout = null;

function bsuche() {
	if (timeout) {  
		clearTimeout(timeout);
	}
	timeout = setTimeout(function() {
		bgo('eingabe','ausgabe');
	}, 500);
}


function getHTTPObject(){
	if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) return new XMLHttpRequest();
	else {
		alert("Your browser does not support AJAX.");
		return null;
	}
}


function setOutput(){
	if(httpObject.readyState == 4){
		document.getElementById(tagId).innerHTML = httpObject.responseText;
	}
}


function bgo(arg, inTagId){
	httpObject = getHTTPObject();
	tagId = inTagId;
	if (httpObject != null) {
		httpObject.open("GET", "ajax.php?" + arg + "=" + document.getElementById('eingabe').value, true);
		httpObject.send(null);
		httpObject.onreadystatechange = setOutput;
	}
}

var httpObject = null;
 
Zuletzt bearbeitet:
Ändere mal in der "ajax.php" den IF-Block so ab, dann wird die Ladegrafik angezeigt wenn kein Suchbegriff eingegeben wurde bzw. dieser wieder gelöscht wird:

PHP: 
if (isset($_GET['eingabe']) && $_GET['eingabe'] != "") {
    // hier der Code der ausgeführt wird wenn ein gültiger Suchbegriff übergeben wird
} else{
    // und dieser Code wenn kein Suchbegriff übergeben wird
	echo 'Bild: <img src="bilder/ajax-loader.gif" />';
}

Was du aber auch noch machen solltest ist den übegebenen GET-Wert z.B. mit mysql_real_escape_string prüfen.

Außerdem dürfte die "id" ja eindeutig sein, dann kannst du ans Ende der Abfrage auch noch ein "LIMIT 1" machen.

Was ich nicht verstehe, ist der Sinn der Verzögerung. Jeder ist doch froh wenn er möglichst schnell das Ergebnis bekommt. Warum verzögerst du die Anzeige?
 
Oh man: Danke, tombe! Manchmal sieht man den Wald vor lauter Bäumen nicht bzw. denkt einfach zu kompliziert!

Die GET-Werte werden natürlich noch vor SQL-Injections geschützt, aber danke für den Hinweis!

Zur Wartezeit:

Mein Hintergedanke war/ist, das ich vermeiden wollte, das man bei Eingabe von "13" schon das Ergebnis von "1" angezeigt bekommt, wärend man die Eingabe noch nicht abgeschlossen hat (nur Beispielhaft). Ob sich das später "live" durchsetzt oder ich das ganze doch ohne Verzögerung nutze muss ich dann mal schauen.
 
Nun habe ich doch noch etwas, was ich bisher nicht bedacht habe in meinen Tests:

Ich habe später mehrere Eingabefelder und entsprechend auch mehrere (gleich viele) Ausgabe-DIVs. Diese würde ich dann natürlich alle entsprechend benennen: eingabe1, eingabe2, ... sowie ausgabe1, ausgabe2, ...

Nur: Wie bringe ich dem .js-Code bei, das es mehrere geben kann, ohne für jede ID eine neue Funktion anzulegen !?
 
Verstehe es mal wieder nicht so genau aber vielleicht hilft die als Parameter für den Funktionsaufruf die Angabe "this.id".

Damit übergibst du dann immer die ID des Objekts welche die Funktion aufruft. Innerhalb der Funktion kannst du ja dann wieder mit getElementById darauf zugreifen.
 
Derzeit ist es ja so, das ich die Elemente "eingabe" und "ausgabe" nutze und entsprechend in meinem .js-Code verwende. Nun - im "live Betrieb" sollen aber mehrere "eingabe" und "ausgabe" elemente vorhanden sein, entsprechend setze ich die Namen also "eingabe1", "eingabe2", ... und "ausgabe1", "ausgabe2", ... mit fortlaufenden Nummern.

Danke für den Ansatz, aber kannst du dir ggf. einmal meinen .js-Code oben ansehen und mir verraten, wie ich diesen entsprechend anpasse? Javascript ist leider absolut nicht meine Welt :-(
 
Zur Vollständigkeithalber habe ich mein Beispiel von oben aktualisiert und oben auch den Code (aktueller Stand) eingefügt.

Ggf. kann mir ja jemand auf die Sprünge helfen, so das ich mehrere Felder (es werden am Ende mehr als 4 sein) nutze kann...

Edit: Und noch etwas, da steh ich scheinbar gerade auf dem Schlauch: Ich habe mittlerweile das ganze etwas weiter entwickelt und zwei Datenbankabfragen eingebunden. Wenn nichts gefunden wurde, sollte die Abfrage eigentlich ein "Nichts gefunden..." (siehe else) ausgeben, was aber nicht passiert (was an der zweiten Datenbankabfrage liegt, entferne ich diese, wird die Meldung wieder angezeigt). Ich glaube ich sehe gerade den Wald wieder vor lauter Bäumen nicht...

Edit2: OK, letzteres Problem habe ich gelöst, die zweite Abfrage gehört natürlich in die if-Schleife.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück