✔ JQuery: Autovervollständigung in 2 input Felder speichern!

Roumeo · 29. September 2008

Hallo Liebe Community,

ich habe nicht viel Ahnung von JSP und Ajax, brauch aber ne Autovervollständigung.
Folgendes Szenario:
Ich habe ein HTML Formular, In welchen man Ort und Postleitzahl eintragen und speichern soll (In eine MySQL Datenbank). Wenn nun jemand ein Ort oder eine Postleitzahl eingibt, soll er bereits in der Datenbank enthaltene und seinem Wort ähnliche Inhalte angezeigt bekommen. (Livesuche). Wenn er nun so einen Vorschlag anklickt, sollen Postleitzahl und Wohnort Automatisch eingetragen werden.

Die Autovervollständigung mit JQuery hab ich erfolgreich hinbekommen. D.h. Wenn ich einen Wohnort eintrage und ihn anklicke, wird der Wohnort in das Feld übernommen. Wie kriege ich es nun jedoch hin, dass auch gleich die Postleitzahl in das entsprechende Feld eingetragen wird?!

Hier die Codeschnippsel:

Formular:

PHP:

<input type="text" name="Postleitzahl" maxlength="5" class="text" style="margin-top:8px;"  />

<input id="autocomplete" type="text" name="Wohnort"  style="margin-top:8px;" />

 <script type="text/javascript">
          function selectItem(li) {
          	return false;
          }
          function formatItem(row) {
          	return row[0] + "-" + row[1];
          }
          $(document).ready(function() {
          	$("#autocomplete").autocomplete("content/comp.php", { 
          		minChars:2, 
          		matchSubset:1, 
          		matchContains:1, 
          		cacheLength:10, 
          		onItemSelect:selectItem, 
          		formatItem:formatItem, 
          		selectOnly:1 
          	});
          });
          </script>

suchquery (comp.php)

PHP:

<?php
require_once('../inc/rcon.inc.php'); 
require_once('../inc/function.inc.php');

$res = mysql_query("SELECT                          
                      WPLZ,
                      WName,
                      WID                          
                    FROM
                      Wohnort
                    WHERE
                      WPLZ  LIKE '%".$_GET['q']."%' ||
                      WName LIKE '%".$_GET['q']."%' 
                      ");
while($row=mysql_fetch_object($res)) {
 echo $row->WName."|".$row->WPLZ."\n";
}
?>

Ansonsten werden noch die Standard JQuery Dateien aufgerufen :

http://nopaste.easy-coding.de/728
http://code.jquery.com/jquery-latest.pack.js

Danke schon einmal für eure Hilfe!

PS: Hab Codeschnipsel wie Form und co. der Übersichtshalber rausgelassen!

Sven Mintel · 29. September 2008

Moin,

über ein paar Änderungen an selectItem() und formatItem() kann man das gut bewerkstelligen.

Bsp:

Code:

<input id="Postleitzahl" name="Postleitzahl" maxlength="5" class="text" style="margin-top:8px;"  />
<input id="Wohnort"  name="Wohnort"  style="margin-top:8px;" /></form>

 <script type="text/javascript">
 
          function selectItem(li) 
          {
            a=li.getElementsByTagName('noscript');
            for(j=0;j<a.length;++j)
              {
                document.getElementById(a[j].title).value=a[j].innerHTML;
              }
            return false;
          }
          
          function formatItem(row) 
          {
              r=row[0];
              for(i=1;i<row.length;++i)
                {
                  a=row[i].split(':');
                  r+='<noscript title="'+a[0]+'">'+a[1]+'</noscript>';
                }
              return r;
          }
          
          $(document).ready(function() {
              $("#Wohnort").autocomplete("content/comp.php", { 
                  minChars:2, 
                  matchSubset:1, 
                  matchContains:1, 
                  cacheLength:10, 
                  onItemSelect:selectItem, 
                  formatItem:formatItem, 
                  selectOnly:1
              });
          });
          </script>

die comp.php müsste etwas in der Art zurückgeben(es liesse sich zwar auch mit der bisherigen Rückgabe machen, so ist es aber leichter ausbaubar, falls noch mehr Felder komplettiert werden sollen)

Code:

Berlin-Mitte|Postleitzahl:10115
Berlin Prenzlberg|Postleitzahl:10439

Der Aufbau der "optionalen" Datenfelder also nach dem Schema:

Code:

idDesFeldes:Wert

formatItem() schreibt für alle optionalen Werte ein <noscript>-Element in die "Spalte". Die ID des zugehörigen Feldes wird dabei in dessen title-Attribut zwischengelagert.

selectItem() liest nach erfolgter Auswahl diese Werte aus und komplettiert die anderen Felder entsprechend(naj, hier nur eines, geht aber auch mit mehreren)

Beachte die Benamsung der Felder, sie haben das selbe ID-Attribut, wie sie als Namen tragen, damit sie eindeutig identifiziert werden können.

Roumeo · 30. September 2008

Super Geil ich danke dir, klappt super. Und es ist ganz einfach zu erweitern, wie du es gesagt hast

. So Konnte ich das gleiche Spiel auch genau andersherum machen

Eine Frage habe ich noch, wie kann ich bei diesem Script nun bei der Autovervollständigung wenn ich etwas eingebe folgendes anzeigen:

38550 - Isenbüttel anstatt nur 38550 oder Isenbüttel

ohne, dass bei der PLZ z.B. noch der Ort beim klicken auf den Datensatz mit reinkopiert wird oder beim Ort die Postleitzahl. Die Benutzer sollen halt sehen, welche Postleitzahl zu welchem Ort gehören würde

Danke nochmal für die Hilfe

<-- Bin total schlecht in JS ^^

Roumeo · 30. September 2008

WoW habs hinbekommen ^^

Ich musste nur das return von formatitem()

in folgendes abändern:

Code:

return r+" "+row[1];

Danke nochmal

Roumeo · 1. Oktober 2008

So nun hab ich folgendes Problem.

Im Internet Explorer 6 wird wird über den Suchergebnissen ein weißer Kasten gelegt. Im Firefox ist dieser nicht zu sehen.

Hier mal Bilder davon:

Internet Explorer Ansicht
Internet Explorer Ansicht

Ich schätze, das es ein css problem ist. Jedoch ist es zwingend notwendig, dass der IE 6 die Applikation unterstützt.

Hier mein CSS: Code

Code:

.ac_input {
	width: 143px;	
}

.ac_input:hover {
  background:#666666;
}

.ac_results {
	width: 143px;
	background: #eee;
	cursor: pointer;
	position: absolute;
	left: 0;
	font-size: 90%;
	z-index: 101;
}
.ac_results ul {
	width: 143px;
	list-style: none;
	padding: 0px;
	margin: 0px;
	border: 1px solid #000;
}
.ac_results li {
	width: 140px;
	padding: 2px 2px;
}
.ac_results a {
	width: 100%;
}
/* thanks udoline: this fixed position error into msie */
.ac_results iframe {
	width: 143px;
	position: absolute;
}
.ac_loading {
	background : url('images/indicator.gif') right center no-repeat;
}
.over {
	background: #888888;
}

Wie ihr vielleicht auf den Bildern seht, hab ich ein kleines Umlautproblem. Ich speicher die Umlaute in der Datenbank als ganz normale ä, ü, ö und ß. Das Ajax Script zeigt diese nun in ? Zeichen an. Ich habe mal testweise die durch den Query erhaltenen Daten per htmlentities() geändert, so dass aus nem ü = ü wird. Danach werden die Umlaute auch richtig angezeigt. Übernehme ich jedoch einen Vorschlag aus dem Ajax Autovervollständigungsscript, so steht in der Textbox dann auch ü und das wird den User verunsichern. Außerdem funktioniert der Vergleich nicht mehr, es sei denn die User geben bei Ort oder Postleitzahl z.B. für Isenbüttel : Isenbüttel ein.

Liebe Grüße

Und danke nochmal Martin

Sven Mintel · 1. Oktober 2008

Was die Umlaute betrifft:
Sende in der comp.php einen Content-Type-Header mit einem Charset passend zu der eigentlichen Seite, bspw.

Code:

header('Content-type: text/html; charset="ISO-8859-1"',true);

Das andere kann ich nicht nachvollziehen, der IE tut bei mir dasselbe wie andere Browser, allerdings nicht mit deinem CSS, da passiert garnicht.
Ich nutze dieses CSS: http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.css

Roumeo · 1. Oktober 2008

BOAH ICH könnt dich knutschen

Danke danke danke ^^

Hatte den selben header nur ohne den boolischen wert und wundere mich seit gestern, warum es nicht geht. War schon dabei jede variable per utf8_encode und utf8_decode zu manipulieren und du hast mich davor bewahrt

du bist mein held xD

Roumeo · 1. Oktober 2008

Also das CSS funktioniert nun. Ich war mit dem Charset zu voreilig, denn ich hatte im Browser noch den ISO Set eingestellt.

Wenn er auf UTF-8 eingestellt ist wird aus dem Umlaut ein ?.

Also ich habe alle Dateien auf UTF-8 kodiert, Alle Tabellen, Datenbanken und Spalten sind auf UTF-8.

Mein Header sieht so aus:

Code:

<?php 
header('Content-type: text/html; charset="UTF-8"',true);
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<?
require_once('inc/rcon.inc.php'); 
require_once('inc/function.inc.php');
?>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Mitfahrgelegenheitsb&ouml;rse</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <!--[if IE 6]> <link type="text/css" rel="stylesheet" media="screen" href="ie.css" /> <![endif]--> 
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquery.autocomplete.js"></script>
 </head>
 <body>

Hmm hat wer ne Idee? Das einzige was funktioniert, aber Zeitaufwendig und keine schöne Lösung ist, wäre es mittels utf8_encode und utf8_decode zu realisieren.... :/

Sven Mintel · 1. Oktober 2008

Roumeo hat gesagt.:
Also ich habe alle Dateien auf UTF-8 kodiert, Alle Tabellen, Datenbanken und Spalten sind auf UTF-8.

Die Datenbank-Verbindung in der comp.php, ist die auch auf UTF-8 eingestellt? Und sendest du dort auch den UTF-8 header() ?

Roumeo · 1. Oktober 2008

So habe eine Lösung gefunden! Ich habe folgenden Code um die Zeile: mysql_query("SET NAMES utf8"); erweitert.

<?php

$dbname = "";
$dbuser = "";
$dbpass = "";
$dbserv = "";

mysql_connect($dbserv, $dbuser, $dbpass) ||
die ("Could not contact MySQL".mysql_error());

mysql_select_db($dbname) || die ("DB not found: Error: ".mysql_error());

mysql_query("SET NAMES utf8");

?>

✔ JQuery: Autovervollständigung in 2 input Felder speichern!

Roumeo

Mitglied

Sven Mintel

Mitglied

Roumeo

Mitglied

Roumeo

Mitglied

Roumeo

Mitglied

Sven Mintel

Mitglied

Roumeo

Mitglied

Roumeo

Mitglied

Sven Mintel

Mitglied

Roumeo

Mitglied

Neue Beiträge