scriptaculous + php - Livesuche

SteffenR · 24.05.2006, 13:12

Moin
Ich bin gerade ein wenig am Rumtesten mit dem Scriptaculous / Prototype Framework..
Vorher hatte ich mich mit der Thematik "Ajax" leider noch nicht weiter auseinandersetzen können .. (aber das werde ich 100%-ig noch machen

)

Problematik:
> Ajaxanwendung am Beispiel einer Postleitzahlensuche
> Benutzer bekommt Eingabefeld gibt PLZ ein - Suche erfolgt während der Eingabe

Die grundlegende Funktionalität ist bereits vorhanden - ich weiss nun nur nicht, wie ich die Eingaben an mein PHP Script weiterleite, welches die Abfragen an die DB stellt..
Derzeit werden vom PHP Script alle Ort / PLZ aus der Tabelle ausgelesen - die Anzeige erfolgt im Layer nach der Eingabe.

Nur wundere ich mich, dass es nicht möglich ist via $_GET auf die Variablen des Formulars zuzugreifen ..

HTML

PHP-Code:


			
<!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" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Autocompleter functional test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="js/ajax/lib/prototype.js" type="text/javascript"></script>
  <script src="js/ajax/src/scriptaculous.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
    .selected { background-color: #888; }
  </style>
</head>
<body>
<form method="get" id="searchform" action="/">
Eingabe: <input id="ac2" type="text" autocomplete="off" name="ac2" />
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
  new Ajax.Autocompleter('ac2','ac2update','_autocomplete_res.php');
// ]]>
</script>
</form>

</body>
</html>

PHP

PHP-Code:


			
<?php
include_once('config\config.php'); //nicht weiter wichtig - nur DB Connecten etc

function getOrte($search)
{
  $SQL = "SELECT * FROM plz " WHERE PLZ LIKE '$search%'";
  $q = mysql_query($SQL);
  $rows = mysql_num_rows($q);
  $ergebnis = array();
  for($i=0; $i<$rows; $i++)
  {
    $res = mysql_fetch_array($q);
    $ergebnis[$i]['PLZ'] = $res['PLZ'];
    $ergebnis[$i]['Ort'] = $res['Ort'];
  }
  return $ergebnis;
}
//$ar = array('Listeintrag1','Listeintrag2','Listeintrag3','Listeintrag4');
?>
<ul>
<?php 
$search = $_GET['ac2'];
$ausgabe = getOrte($search);
for ($i=0; $i<count($ausgabe); $i++) 
{
 ?>
  <li><? echo $ausgabe[$i]['PLZ']." ".$ausgabe[$i]['Ort']; ?></li>
<?php 
}
?>
</ul>

Wäre nett, wenn mir da jemand helfen könnte - nehme mal nicht an, dass dies sonderlich kompliziert ist, oder ??

SteffenR

rigo2 · 08.06.2006, 15:21

Genau Deine Wünsche werden auf Geo-Names erfüllt.

CU
rigo

SteffenR · 09.06.2006, 13:00

Danke für den Link .. leider etwas zu spät ;(
Ich habe mich selbst um eine Problemlösung gekümmert und war dabei sogar erfolgreich

Ich nutze nun nicht mehr das scriptaculous / Prototype Framework sondern ein normales Dropdown und ein wenig Ajax

Falls es jemanden interessiert
formular.php

PHP-Code:


			
<? include('./connect.inc'); ?>
<!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" >
<head>
<title>Postleitzahlen</title>
<script language="javascript"  type="text/javascript">
var url = "plz.php?param=";
function handleHttpResponse() {
  if (http.readyState == 4) {
    if (http.responseText.indexOf('invalid') == -1) {
     document.forms['form'].plzid.options.length = 0;
     results = http.responseText.split("<2>");
     var fehler = "fehler";
     for (i = 0; i < results.length-1; i++){
      stadt = results[i].split("<1>");
      name  = unescape(stadt[0]);
      plzid = unescape(stadt[1]);
        document.forms['form'].plzid.options[i] = new Option(name,plzid);
     }
     isWorking = false;
}}}
var isWorking = false;
function updatePLZ() {
  if (!isWorking && http) {
    var zipValue = document.getElementById("plz").value;
    http.open("GET", url + escape(zipValue), true);
    http.onreadystatechange = handleHttpResponse;
    isWorking = true;
    http.send(null);
  }
}
function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
     xmlhttp.overrideMimeType("text/xml");
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>
<body>
<form action="" method="get" name="form">
<table width="380" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Postleitzahl</td>
<td><input type="text" value="<?=$plz?>" size="5" name="plz" id="plz" onchange="updatePLZ();" /></td>
</tr>
<tr>
<td>Ort</td>
<td>
<select name="plzid" style="width:200px ">
<?
   if(isset($plz)){
   $query = "select * from plzs where 1 AND `plz` = '$plz'";
   $result = mysql_query($query);
   $count = mysql_num_rows($result);
     if ($count > 0) {
        while($res = mysql_fetch_object($result)){
            echo '<option value="'.$res->id.'"';
            if($plzid == $res->id){ echo " selected"; }
            echo '>'.$res->ort.'</option>';
   }}}
?>
</select>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="button" name="Submit" value="Senden" onclick="updatePLZ();" /></td>
</tr>
</table>
</form>
</body>
</html>

plz.php

PHP-Code:


			
<? 
   include('./connect.inc');
   $zipcode = $_GET['param']; // The parameter passed to us
   $query = "select * from `plzs` where `plz` LIKE '$zipcode%'";
   $result = mysql_query($query);
   $count = mysql_num_rows($result);
     if ($count > 0) {
        while($res = mysql_fetch_object($result)){
            $array .= "".rawurlencode($res->ort)."<1>".$res->id."<2>";   
      }
     }
   if (isset($array)){ $ausgabe = $array; }
   else{ $ausgabe = "fehler"; }
   echo $ausgabe;
?>

Vlt kann dies ja jemand brauchen

Gruß,
SteffenR