1. suggestie.html (zoekveld incl. Jacascript)
2. doe_suggestie.php (query)
3. XHConn (JS bestand)
Na de suggestie kan ik dus op de naam klikken en standaard verwijst deze naar doe_iets.php. Maar mijn plan is om dat zoekveld in een ander groot formulier te breien. Ik wil dus dat het resultaat in dezelfde pagina tevoorschijn komt na klikken. Normaal gesproken geen probleem maar met ajax is er geen form tag e.d. dus ik zou niet weten waar te beginnen. wie kan helpen?
dit is mijn php pagina:
<?php
require_once("dbConf.inc");
$invoer = $_POST["invoer"];
//query
$query = mysql_query("SELECT * FROM cms_users WHERE name LIKE '".$invoer."%' LIMIT 0, 50") or die( mysql_error() );
/* BELANGRIJK: zorg voor de juiste header: het MIME type "text/xml"
anders pakt Javascript het geretourneerde XML object niet! */
header('Content-Type: ' . "text/xml");
echo "<suggesties>";
while( $resultaten = mysql_fetch_assoc( $query ) ) {
echo "<suggestie>" . $resultaten['name'] . "\n</suggestie>";
}
echo "</suggesties>";
?>
en dit mijn html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title></title>
<script type="text/javascript" src="XHConn.js"></script>
<script type="text/javascript">
function doe_suggestie()
{
if( !document.getElementById || !document.getElementsByTagName) return false;
var myConn = new XHConn();
if( !myConn ) return false;
var invoer = "&invoer=" + invoer_veld.value;
/* functie die uitgevoerd wordt als het laden klaar is */
var fnWhenDone = function(oXML)
{
var suggesties = oXML.responseXML.getElementsByTagName("suggestie");
var suggestie_lijst = "<ul>";
for(var c = 0; c < suggesties.length; c++)
{
suggestie_lijst += "<li><a href=\"doe_iets.php?woord=" + suggesties[c].firstChild.nodeValue + "\">" + suggesties[c].firstChild.nodeValue + "</a></li>";
}
suggestie_lijst += "</ul>";
suggestie_container.innerHTML = suggestie_lijst;
}
/* connecten met PHP script */
myConn.connect("doe_suggestie.php", "POST", invoer, fnWhenDone);
}
function opzetten()
{
var invoer_veld = document.getElementById("invoer_veld");
var suggestie_container = document.getElementById("suggestie_container");
invoer_veld.onkeyup = doe_suggestie;
}
window.onload = opzetten;
</script>
</head>
<body>
<p>Vul hier een stuk van een woord in</p>
<input type="text" size="20" id="invoer_veld" name="invoer">
<div id="suggestie_container"></div>
</body>
</html>
die andere lijkt mij overbodig....
