Livesuche mit AJAX

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

~~m*******t~~

20:21, 29.3.2009

also,
ich habe folgendes problem.

ich habe ein script für eine livesuche mit ajax im internet gefunden.
mein problem ist hierbei das eine tabelle ausgegeben wird.
ich möchte aber das es so ist wie bei http://www.google.com/webhp?complete=1
das also ein auswahl menü darunter ensteht, das man daraus auswählen kann und das, dass dann ins input feld eingetragen wird.

mein momentanes script sieht so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
	<head>
		<link rel="stylesheet" href="style.css" type="text/css">
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script language="JavaScript" src="suggest.js"></script>
		<script language="JavaScript">
			window.onkeyup = eingabeAuswerten;
		</script>
	</head>

	<body>
		<form name="f">
			<span id="telefonbuch">
			Geben Sie den Namen der Person ein:<br />
			<input name="person" type="text" size="30"></span>
			<span id="antwort"></span>
		</form>
	</body>
</html>

den code der suggest.js datei:

function makeHttpRequest() {
	var resObjekt = null;
	try {
			resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
		}
	catch(Error) {
		try {
			resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch(Error) {
			try {
				resObjekt = new XMLHttpRequest();
			}
			catch(Error) {
				alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
			}
		}
	}
	return resObjekt;
}
var resObjekt = makeHttpRequest();
 
function eingabeAuswerten() {
        if(document.f.person.value != "") {
		resObjekt.open('get', 'suggest.php?person=' + escape(document.f.person.value.toLowerCase()), true);
		resObjekt.onreadystatechange = suchePerson;
		resObjekt.send(null);
	} else {
		document.getElementById('antwort').style.visibility = "hidden";
	}
}

function suchePerson() {
	document.getElementById('antwort').style.visibility = "visible";
	if(resObjekt.readyState == 4) {
		document.getElementById('antwort').innerHTML = resObjekt.responseText;
	}
} 

function einsetzen() {
	document.f.person.value = document.f.vorschlag.value;
}

und die php-Datei, die die Informationen immer neu abruft:

<?php
include '../connect_db.php';


$sql_query = mysql_query("SELECT * FROM inhaltsverzeichnis WHERE person LIKE '%".$_GET['person']."%'  ORDER BY id DESC LIMIT 0,10");


echo '<table class="table" cellspacing="1" cellpadding="4">';
echo '<tr class="table_head"><td>Titel</td></tr>';

while($row = mysql_fetch_assoc($sql_query)){
	echo '<tr class="tr_'.$count.'"><td>'.$row['titel'].'</td></tr>';
}

echo '</table>';
?>

ich hoffe mir kann jemand helfen
gruss

Beitrag zuletzt geändert: 29.3.2009 20:24:51 von moonfight

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
prog

prog hat kostenlosen Webspace.

16:41, 30.3.2009
Das Stichwort heißt dojo. (http://dojotoolkit.org/)

http://docs.dojocampus.org/dijit/form/ComboBox

mfg,
Prog
ps3web

ps3web hat kostenlosen Webspace.

9:25, 1.4.2009
Eine weitere Möglichkeit, wäre das autocompleter-Plugin für jquery zu nutzen:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city