Voortgezet onderwijs | ThinkQuest Jr Webplek

Kennisnet.nl

Hoe maak je een..Zoeksuggestie met AJAX

Gepubliceerd op 20 juli 2006

AJAX (Asynchrone JAvascript XML) stelt je in de staat de gebruiker tegemoet te komen. Bijvoorbeeld met suggesties voor zoekwoorden als in Google Suggest. Hier vind je een versimpelde versie van deze toepassing.

Deze AJAX-applicatie is een samenwerking tussen (X)HTML, Javascript, CSS (aan de bezoekerskant) en PHP (aan de serverkant) en werkt als volgt; De gebruiker typt een letter in, bij iedere letter wordt er contact gelegd met een PHP script, dat alle woorden teruggeeft die met die letter(s) beginnen. Die woorden ter suggestie worden op het scherm getoond en zijn te selecteren door de gebruiker.

Bekijk hier en download
Download hier alle bronbestanden [HTML 3 Kb ]

Het HTML-bestand
Dit bestand ('suggestie.html') bevat de Javascriptcode en HTML code. Het uitgebreidere 'suggestie_opmaak.html' bevat ook CSS opmaakcode.

<!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;
      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;
      }
      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>

Het PHP script ('doe_suggestie.php')
Heeft als invoer de variabele invoer=woord (het script wordt zo aangeroepen: doe_suggestie.php?invoer=s) en retourneert suggesties in de vorm (=XML): '<suggesties><suggestie>Sanne</suggestie><suggestie>Sinterklaar</suggestie></suggesties>'