Suchmaschine mit Ajax

nchristoph

Erfahrenes Mitglied
Hallo,

ich arbeite gerade an einer Suchmaschine mit PHP. Ich hab jetzt nach einem Tutorial Ajax hinzugefügt um die Ausgabe zu vereinfachen.

Leider funktioniert die Ausgabe nicht ganz so wie ich will.

Index.php
PHP:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Masslisten Suchmaschine</title>
<link href="suche.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
		function searchFor(suchbegriff){
			var xmlHttp = null;
			// Mozilla, Opera, Safari sowie Internet Explorer 7
			if (typeof XMLHttpRequest != 'undefined') {
				xmlHttp = new XMLHttpRequest();
			}
			if (!xmlHttp) {
				// Internet Explorer 6 und älter
				try {
					xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
					try {
						xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
					} catch(e) {
						xmlHttp  = null;
					}
				}
			}
			// Wenn das Objekt erfolgreich erzeugt wurde			
			if (xmlHttp) {
				var url = "suche.php";
				var params = "suchbegriff="+suchbegriff;
				
				xmlHttp.open("POST", url, true);
				
				//Headerinformationen für den POST Request
				xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				xmlHttp.setRequestHeader("Content-length", params.length);
				xmlHttp.setRequestHeader("Connection", "close");					
			
				xmlHttp.onreadystatechange = function () {
					if (xmlHttp.readyState == 4) {
						// Zurückgeliefertes Ergebnis wird in den DIV "ergebnis" geschrieben
						document.getElementById("ergebnis").innerHTML = xmlHttp.responseText;
					}
				};				
				xmlHttp.send(params);
			}			
		}
	</script>
</head>
<body>
<div class="suchmaschine"><center><h1>Masslisten Suchmaschine</h1>
<br/>
<table style="width:400px;border:0;" >
  <tr>    
      <td height="23"><label for="search_term">
        <input  type="text" onkeyup="searchFor(this.value);" size="60" />
      </label></td>
        </tr>
</table>
<div class="header"><table>
<tr ><th class="position">Holzart</th><th class="starke">St&auml;rke</th><th class="klasse">Klasse</th><th class="trocken">Trockenheit</th><th class="partie">Partienummer</th><th class="link">Link</th></tr>  
<div id="ergebnis"></div>
</table></div></center>  
</center>
</div>
</body>
</html>

Search.php
PHP:
<?php
	$server = "localhost";
	$benutzername = "root";
	$passwort = "";	
	
	$datenbank = "suchmaschine";

	// Server Verbindung herstellen
	mysql_connect($server,$benutzername,$passwort) or 
	die ("Keine Verbindung moeglich");
	
	// Datenbank Verbidung
	mysql_select_db($datenbank) or
	die ("Die Datenbank existiert nicht");

	$tabelle = "suchmaschine";

 
    if ($_POST["suchbegriff"])
    {
    $sql = "SELECT
				ID,
                Holzart,
				Klasse,
				Trockenheit,
				Partie,
				Kubik,
				Starke,
				Pfad
            FROM
                suchmaschine
            WHERE
                Holzart LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
				Klasse LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
				Trockenheit LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
				Partie LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
				Kubik LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%' OR
				Starke LIKE '%" . mysql_real_escape_string(utf8_decode($_POST['suchbegriff'])) . "%'"; 
            
		$result = mysql_query($sql) OR die(mysql_error());
		if(mysql_num_rows($result)) { // gucken ob was im Query drinsteckt
			while($row = mysql_fetch_object($result)) 
			{
				echo ('<tr>');
				echo ('<td class="position">'.(utf8_decode($row->Holzart)).'</td>');
				echo ('<td class="starke">'.(utf8_decode($row->Starke)).'</td>');
				echo ('<td class="klasse">'.(utf8_decode($row->Klasse)).'</td>');
				echo ('<td class="trocken">'.(utf8_decode($row->Trockenheit)).'</td>');
				echo ('<td class="partie">'.(utf8_decode($row->Partie)).'</td>');
				echo ('<td class="link"><a href="'.(utf8_decode($row->Pfad)).'">'.(utf8_decode($row->Partie)).'</a></td>');
				echo ('</tr>');
			}
		}else{
				echo 'Suche ergab keine Treffer<br />';
		}
	}
?>

Wenn ich das ganze ohne Ajax mache, klappt die formatierte Ausgabe. Sobald ich Ajax benutze, gibt er mir die Suchergebnisse unformatiert und in einer Wurst aus.

Wie kann ich das richtig machen? Ich bin ein totaler Anfänger punko Ajax und Javascript.

mit verzweifelten Grüssen
 
Zuletzt bearbeitet:
Ich nehme an, dass Problem mit deiner Ausgabe liegt daran, dass "#ergebnis" ein DIV ist und du in deinem echo aber Tabellen Zeilen ausgibst. Da fehlt das "<table></table>".


Du kannst dir die beiden Header übrigens sparen, die werden natürlich automatisch gesetzt. Wäre ja sonst ziemlich nervig.
Javascript:
xmlHttp.setRequestHeader("Content-length", params.length);
xmlHttp.setRequestHeader("Connection", "close");
 
Den table Tag hab ich vor und nach dem Div gemacht. Wie könnte ich das anders lösen, als mit Table?

//Edit: Auch das Umplatzieren der Table Tags hab keine änderung gebracht. Im Quelltext wird die Tabelle auch nicht angezeigt.

//Edit2: Habs hingekriegt. Ich hab einfach den Div durch einen Table ersetzt. Funktioniert wie ein Glöckchen, die Formatierung noch nicht ganz aber das krieg ich auch noch hin
 
Zuletzt bearbeitet:
Den table Tag hab ich vor und nach dem Div gemacht.

Das ist dann aber kein gültiges HTML. Direkt unterhalb eines <table> Tags hat kein <div> etwas zu suchen.

Wirf das div raus, nenn die Tabelle stattdessen "ergebnis" (id) und jetzt musst du nur deine Überschriften jedes mal nochmal ausgeben. Also direkt vor der while Schleife

HTML:
<div class="header"><table id="ergebnis"></table></div>

PHP:
echo '<tr ><th class="position">Holzart</th><th class="starke">St&auml;rke</th><th class="klasse">Klasse</th><th class="trocken">Trockenheit</th><th class="partie">Partienummer</th><th class="link">Link</th></tr>';

Das hat auch den Vorteil, dass du alles auf der Server Seite hast. Angenommen es kommt eine weitere Spalte dazu, dann musst du nicht zusätzlich das HTML oder JavaScript ändern.
 
Zurück