[AJAX + PHP] Suche für Input Feld

M

Mc.Alcatraz

Gast
Also ich habe einen Array z.B. $namen. Nun möchte habe ich ein Inputfeld in das Usernamen eingetragen werden, an diese dann Nachrichten verschickt werden. Da es sehr viele sind möchte ich nun wenn man beginnt einen Namen einzutippen darunetr ein kleines Feld kommt das so maximal 15 Namen anzeigt die mit den jeweiligen Buchstaben beginnen, die möglichen NAmen reduzieren sich natürlcih je mehr man eingibt. Es sollen nur nie mehr als 15 angezeigt werden auch wenn es mehr mit gleichem Anfang gibt. Mit den Pfeiltasten soll man durch die Liste springen können und mit enter wird der ausgewählte Name dann in das input Feld übernommen.
 

J!0X

Ensign
Dabei seit
Juni 2005
Beiträge
147
Das input-tag hat ein Attribut names onkeyup mit dem du eine Funktion beim Loslassen einer Taste aufrufen kannst. Du erstellst also ein PHPscript welches dir die Daten aus einer Datenbank ausliest, und formatierst es mit CSS so, dass es direkt unter dem Textfeld ist. So weit zur Theorie.
Als erstes der AJAX-Teil:
Code:
<head>
<script language="javascript">
var xmlhttp;
function loadxmlobj()
{
	try
	{
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e)
	{
		try
		{
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e)
		{
			xmlhttp = null;
		}
	}
	
	if (!xmlhttp && typeof XMLHttpRequest != "undefined")
	{
		xmlhttp = new XMLHttpRequest();
	}
}
function gE(id)
{
	return document.getElementById(id);
}
function XMLRequest(serverFile, objID) {
	var obj = gE(objID);
	xmlhttp.open("GET", serverFile);
	xmlhttp.onreadystatechange = function() 
	{
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			obj.innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.send(null);
}
function showNames()
{
        XMLRequest("phpscript.php?entered=" + gE("name").value, "liste");
}
function setName(name)
{
        gE("name").value = name;
}
</script>
</head>
<body onload="javascript:loadxmlobj()">
<input type="text" id="name" value="" onkeyup="javascript:showNames()" /><br />
<div id="liste" style="visibility:hidden"></div>
</body>
So. Als nächstes das PHP-Script.
PHP:
<?php
if(isset($_GET["entered"]))
{
        $result = mysql_query("SELECT name FROM users WHERE name LIKE \"".$_GET["entered"]."\" LIMIT 0,10");
        while($row = mysql_fetch_assoc($result))
        {
                  echo "<a href=\"javascript:setName('".$row["name"]."')\">".$row["name"]."</a>";
        }
}
?>
So üngefähr wirds sein. Habe es nicht getestet :D.
 

hemorieder

Lieutenant
Dabei seit
März 2003
Beiträge
602
war zwar nich meine frage, aber funzen tut es bei mir nich ;) ich hab auch die phpscript.php umbenannt. muss ich irgendwie ajax auf dem server installiert haben ?
 
M

Mc.Alcatraz

Gast
mmmh mal ausprobieren, geht nicht gibts noc handere möglichkeiten.
 
Zuletzt bearbeitet:

J!0X

Ensign
Dabei seit
Juni 2005
Beiträge
147
Du wolltest eine Methode mit AJAX. Du könntest es auch mit Flash machen, davon habe ich aber keine Ahnung. Wenn mein Script nicht funktioniert, dann kannst du es ja debuggen. Am besten mal in der Javascript-Konsole vom Firefox nachschauen oder nur das PHP-Script aufrufen.
 
M

Mc.Alcatraz

Gast
das einzige problem, is das <body onload=...> kann man das auch woanders als in den body tag machen.
 

Sgt_H4rtman

Ensign
Dabei seit
Dez. 2003
Beiträge
249
Hi,

Ich habe 2 Dinge an J!0X' Script zu bemängeln, beide sind MSIE spezifisch.
Als erstes ist es unklug das XmlHTTP-Request Objekt zunächst als ActiveX-Objekt erstellen zu wollen. Das Ganze aus zweierlei Gründen:
1. Müssen alle Browser die kein ActiveX unterstützen, und das ist die Mehrzahl, durch die Ganze Fehlerbehandlung durch -> Performancenachteil.
2. Würde der MSIE 7 das ActiveX Modul nutzen anstatt des nativen JavaScript-Objektes, welches er zur Verfügung hat. Dieses ist um ein vielfaches schneller als das ActiveX-Gedöhns.

Der andere Fehler ist auf einen Fehler im MSIE zurückzuführen. Für jeden Request muss im IE das XmlHTTP-Request Objekt neu erstellt werden, da der Browser sonst die Bearbeitung des Scriptes abbricht.

Es ist also klug, die Anweisung loadxmlobj() aus dem onload-Tag herauszunehmen und statt dessen in der Funktion showNames() vor dem Aufruf von XMLRequest() zu platzieren. So sollte das Script dann auch funktionieren.


Ciao
 
Top