Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

AutoComplete mit PHP MySQL jQuery jQueryUI JSON

Mitglied: Guenni

Guenni (Level 2) - Jetzt verbinden

04.05.2014, aktualisiert 08.05.2014, 11460 Aufrufe, 2 Kommentare, 1 Danke

Auf die Frage"Wie kann man nach Eingabe in einem Textfeld Suchvorschläge anzeigen oder ein Select-Feld füllen",

oder ähnlichen Fragen, fällt oftmals das Stichwort "AutoComplete".

Anstoss, mich selber mal mit diesem Thema zu beschäftigen, war das folgende Problem eines Forenusers:

Aus einer Tabelle mit ca. 16.000 Zeilen, sollte nach Eingabe einer PLZ ein Ort gefunden werden,

damit dieser automatisch mit der PLZ im Formular übernommen wird. Problem: Es sollte ein Select-Feld

gefüllt werden, was aber 4 und mehr Sekunden dauert. Sehr unkomfortabel.

Was ist AutoComplete?

AutoComplete ist Bestandteil einer jQueryUI-Bibliothek, im Aufbau ähnlich einer Funktion,

und wird, wie in JavaScript üblich, mittels Punkt an ein Objekt angehangen.

Das Objekt, hier ein Textfeld, wird mittels einem Selector anhand seiner ID ermittelt.

01.
$("#ID_des_Textfelds").autocomplete({ . . . });
Innerhalb der geschweiften Klammern wird eine Datenquelle angegeben. Die Datenquelle kann folgendes sein:

Ein "hardcodiertes Array" im Quelltext, wobei die Syntax aber einem anderen Kontext(JSON) unterliegt.


Beispiel -> http://www.jqueryautocomplete.com/jquery-autocomplete-json-example.html

Wobei hier schnell klar wird, dass sich diese Methode, m.M. nach, eigentlich nur für einige "starre" Begriffe eignet.

Eine Datenbanktabelle, hier MySQL.

Eine CSV-Datei.


Ein weiteres, optionales Argument in AutoComplete ist die Angabe minLength: x.

Das bedeutet, dass man mindestens x Zeichen eingeben muss, um eine Suche in der Quelle zu starten.

Der Aufbau von AutoComplete in diesem Beitrag sieht dann so aus:

01.
<script type="text/javascript"> 
02.
<!-- 
03.
$(function() { 
04.
 /* 
05.
 * Der Selektor #search ist die ID des Textfelds 
06.
 */ 
07.
 $("#search").autocomplete( 
08.
09.
	  /* 
10.
	  * Angabe der Quelle 
11.
	  */ 
12.
	  source: DatenQuelle, 
13.
	  /* 
14.
	  * minLength bestimmt, nach wieviel eingegebenen Zeichen die Suche starten soll 
15.
	  */ 
16.
	  minLength: x 
17.
	}) 
18.
}); 
19.
// --> 
20.
</script>
Dann müssen noch die Pfade zu den jQuery/jQueryUI-Bibliotheken im Script eingebunden werden.

Die hier verwendeten Bibliotheken findet man unter http://jqueryui.com/download/

Die Datensuche in einer MySQL-Tabelle oder CSV-Datei

Die Suche selber wird in einem separatem PHP-Script ausgeführt. Der Name des Scripts wird in der AutoComplete-Funktion als Datenquelle angegeben:

01.
. . . 
02.
source: 'name_des_php-script.php', 
03.
minLength: 2 //oder anderer Wert 
04.
. . .
Was passiert nun? Nach Eingabe der ersten beiden Ziffern einer PLZ wird das Script mit einem Parameter aufgerufen.

Der Parameter enthält dabei die beiden Ziffern. Analog dazu kann man das Script auch direkt im Browser aufrufen:

01.
name_des_php-script.php?term=41
Anhand dieses Parameters als Suchkriterium sucht das Script in der Tabelle/CSV-Datei alle Einträge, in der die PLZ mit diesen

beiden Ziffern beginnen und gibt das Ergebnis aus. Dieser Vorgang wiederholt sich mit Eingabe jeder weiteren Ziffer,

bzw. auch nach dem Löschen einer Ziffer.

Eine Einschränkung der MySQL-Tabelle, die ich noch nicht beheben konnte:

Viele Postleitzahlen im Osten Deutschlands, z.B. Dresden (PLZ: 01307), beginnen mit einer "0".

Auch wenn das PLZ-Feld in der Tabelle als String definiert ist, weigert sich MySQL eine solche PLZ abzuspeichern,

bzw. die CSV-Datei zu importieren. Liegt vielleicht daran, dass die Felder nicht in "" eingeschlossen sind.

Die "0" wird deshalb erst im Suchergebnis der PLZ vorangestellt.

Die Eingabe "01" also findet nichts, allerdings findet die Eingabe "13" Dresden (01307) sowie Berlin (13051).

Es darf also nicht die "0" als erste Ziffer einer PLZ eingegeben werden.

In der CSV-Datei stehen die PLZ mit führender 0 drin. Hier kann die 0 als erste Ziffer eingegeben werden.

Für beide Methoden gilt:

Die gefundenen Ergebnisse werden in einem Array wiederum als Array in der JSON-Notation abgelegt.

Das gesamte Array wird mit der Funktion json_encode(array) ausgegeben.

Info zu den gespeicherten Daten: Die MySQL-Tabelle sowie die CSV-Datei enthalten folgende Spalten:

id
Postleitzahl
Ort
Kreisschlüssel
Kreis/Stadt
Länderschlüssel
Bundesland

Für die Richtigkeit/Vollständigkeit der Daten kann ich natürlich keine Garantie übernehmen.

Das Script Datenquelle MySQL


01.
<?php 
02.
$conn = new PDO("mysql:host=localhost;dbname=test", "guenni", "guenni"); 
03.
$query = "select plz, ort, kreis, bundesland from postleitzahlen where plz like '".$_REQUEST['term']."%'"
04.
$stmt = $conn->prepare($query); 
05.
$ok = $stmt->execute(); 
06.
if($ok === false){ 
07.
 print_r($stmt->errorInfo()); 
08.
}else
09.
			while($result = $stmt->fetch(PDO::FETCH_ASSOC)){ 
10.
			 if($result['plz'] < 10000){ 
11.
			  /* 
12.
				* Falls die PLZ < 10000 ist, bekommt sie eine 0 vorangestellt 
13.
				*/ 
14.
			  $result['plz'] = "0".$result['plz']; 
15.
16.
			 $results[] = array("label" => $result["plz"]." / ".$result["ort"]." / ".$result["kreis"]." / ".$result["bundesland"]); 
17.
18.
			echo json_encode($results); 
19.
20.
?> 
21.
 

Das Script Datenquelle CSV-Datei


01.
<?php 
02.
 $datei = "postleitzahlen2.csv"
03.
 $f = fopen($datei, "r"); 
04.
 $orte = array(); 
05.
 $length = strlen($_REQUEST['term']); 
06.
 while($line = fgetcsv($f, 0, ";")){ 
07.
  if(substr($line[1], 0, $length) == $_REQUEST['term']){ 
08.
	 /* 
09.
	 * Arrayelemente in $line 
10.
	 * 0 = id 
11.
	 * 1 = Postleitzahl 
12.
	 * 2 = Ort 
13.
	 * 3 = Kreisschlüssel 
14.
	 * 4 = Kreis/Stadt 
15.
	 * 5 = Länderschlüssel 
16.
	 * 6 = Bundesland 
17.
	 */ 
18.
	 $orte[] = array("label" => $line[1]." / ".$line[2]." / ".$line[4]." / ".$line[6]); 
19.
20.
21.
 fclose($f); 
22.
 echo json_encode($orte); 
23.
?> 
24.
 

Ein Formularscript zum Suchen


01.
<!DOCTYPE HTML> 
02.
<html> 
03.
<head> 
04.
<title>Ortsuche mit AutoComplete</title> 
05.
<!-- Pfade zu den CSS Dateien --> 
06.
<link rel="stylesheet" href="jquery_ui/css/ui-lightness/jquery-ui-1.10.4.custom.css"/> 
07.
<link rel="stylesheet" href="jquery_ui/css/ui-lightness/jquery-ui-1.10.4.custom.min.css"/> 
08.
<!-- Pfade zu den jQuery/jQuery-ui Dateien --> 
09.
<script src="jquery_ui/js/jquery-1.10.2.js" type="text/javascript"></script> 
10.
<script src="jquery_ui/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script> 
11.
<script src="jquery_ui/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script> 
12.
<script type="text/javascript"
13.
<!-- 
14.
$(function() { 
15.
 /* 
16.
 * Der Selektor #search ist die ID des Textfelds 
17.
 */ 
18.
 $("#search").autocomplete( 
19.
20.
		 /* 
21.
		 * Angabe der Quelle 
22.
		 * Script zum Suchen in einer MySQL-Tabelle 
23.
		 * Script zum Suchen in einer CSV-Datei 
24.
		 */ 
25.
		 source: 'a_1orte_source_sql.php', 
26.
		 // source: 'a_1orte_source_csv.php', 
27.
		 /* 
28.
		 * minLength bestimmt, nach wieviel eingegebenen Zeichen die Suche starten soll 
29.
		 */ 
30.
		 minLength: 2 
31.
	}) 
32.
}); 
33.
// --> 
34.
</script> 
35.
</head> 
36.
<body> 
37.
<form action="" method="post"
38.
<p>Eingabe der Postleitzahl zur Ortssuche <input type="text" name="search_ort" id="search" size="60" /></p> 
39.
<p>Suche starten und Ergebnis ausgeben <input type="submit" name="cmd" value="Suchen" /></p> 
40.
</form> 
41.
<?php  
42.
if(isset($_POST['search_ort']) && $_POST['search_ort']){ 
43.
 $orts_parameter = explode("/", $_POST['search_ort']); 
44.
 echo "<p>Postleitzahl: ".$orts_parameter[0]."</p>"
45.
 echo "<p>Ort: ".$orts_parameter[1]."</p>"
46.
 echo "<p>Kreis/Stadt: ".$orts_parameter[2]."</p>"
47.
 echo "<p>Bundesland: ".$orts_parameter[3]."</p>"
48.
}else
49.
			echo "Geben Sie eine Postleitzahl ein und wählen Sie aus der Liste einen Ort aus."
50.
51.
?> 
52.
</body> 
53.
</html> 
54.
 

Man kann sich ein AutoComplete auch "selberbasteln".

Das folgende Script liest die CSV-Datei ein, und übergibt die Daten via json_encode an eine JavaScript-Variable.

Alle Daten liegen dann im Browser vor, weshalb das Laden der Seite dann 1-2 Sekunden dauert.

In einem Textfeld gibt man die PLZ ein, ein Selectfeld wird dann mit den gefundenen Daten gefüllt.

01.
<?php 
02.
 $datei = "postleitzahlen2.csv"
03.
 $f = fopen($datei, "r"); 
04.
 $plz_verzeichnis = array(); 
05.
 $keys = array("id", "plz", "ort", "kreisschluessel", "kreis", "laenderschluessel", "bundesland"); 
06.
 while($line = fgetcsv($f, 0, ";")){ 
07.
 /* 
08.
 * Die einzelnen Zeilenarrays in einem Array speichern. Jedes Zeilenarray 
09.
 * bekommt noch die Schlüssel ($keys) für die Spalten zugewiesen  
10.
 */ 
11.
  $plz_verzeichnis[] = array_combine($keys, $line); 
12.
13.
 fclose($f); 
14.
?> 
15.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
16.
<html> 
17.
<head> 
18.
<title>Ortssuche mit PLZ</title> 
19.
<script src="jquery-1.10.1.js" type="text/javascript"></script> 
20.
<script type="text/javascript"
21.
<!--  
22.
var plz_verzeichnis = <?php echo json_encode($plz_verzeichnis);?>; 
23.
// --> 
24.
</script> 
25.
</head> 
26.
<body> 
27.
<form action="" method="post" name="frm"
28.
<p>PLZ <input type="text" name="plz" id="plz"/> 
29.
Ort <select name="sel_ort" id="sel_ort"
30.
</select> 
31.
</p> 
32.
<p><input type="submit" name="cmd"/></p> 
33.
</form> 
34.
<script type="text/javascript"
35.
<!-- 
36.
var length = 0; 
37.
$(document).ready(function() { 
38.
 /* 
39.
 * Nach Eingabe ins Textfeld (Taste wurde gedrückt) alle bisherigen, gefundenen Orte aus dem Select entfernen 
40.
 */ 
41.
 $("#plz").keydown(function(){ 
42.
  $("option").remove(); 
43.
 }); 
44.
 /* 
45.
 * Nach Eingabe einer Zahl (Taste wurde losgelassen) wird die Stringlänge im Textfeld ermittelt 
46.
 * Die Stringlänge wird für die Funktion substr gebraucht 
47.
 */ 
48.
 $("#plz").keyup(function() { 
49.
  length = document.frm.plz.value.length; 
50.
  if(length == 0){return;} 
51.
  var index = 0; 
52.
 /* 
53.
 * Das Postleitzahlenverzeichnis durchsuchen. Gefunden werden alle Einträge, die mit den bisher 
54.
 * eingegebenen Zahlen übereinstimmen. Anschließend wird das Option-Feld erzeugt und ans Select angehangen 
55.
 * Die Suche im Postleitzahlenverzeichnis beginnt nach Eingabe der zweiten Zahl (length > 1) 
56.
 *  
57.
 */ 
58.
 if(length > 1){ 
59.
  $.each(plz_verzeichnis, function(){ 
60.
   if(length == 0){return;} 
61.
	  if(plz_verzeichnis[index]['plz'].substr(0,length) == document.frm.plz.value){ 
62.
	  var option = "<option >" +  plz_verzeichnis[index]['plz'] + " / " + plz_verzeichnis[index]['ort'] + " / " + plz_verzeichnis[index]['kreis'] + " / " + plz_verzeichnis[index]['bundesland'] + "</option>"
63.
	  $(option).appendTo("#sel_ort"); 
64.
65.
	 index++; 
66.
	}); 
67.
68.
 }); 
69.
}); 
70.
// --> 
71.
</script> 
72.
<?php  
73.
if(isset($_POST['sel_ort'])){ 
74.
 $adresse = array(); 
75.
 $keys = array("PLZ", "Ort", "Kreis/Stadt", "Bundesland"); 
76.
 $adresse = array_combine($keys, explode("/", $_POST['sel_ort'])); 
77.
 echo "<pre>"
78.
 print_r($adresse); 
79.
}else
80.
			echo "Wählen sie nach Eingabe der PLZ einen Ort aus!"
81.
82.
?> 
83.
</body> 
84.
</html> 
85.
 
Ausprobieren --> http://net-comm.de/ortsuche/index.php5

Nachtrag:


Das ist meine erste "Auseinandersetzung" mit jQuery/jQuery-ui. Falls in diesem Beitrag Unrichtigkeiten/Unvollständigkeiten enthalten sind, möge man nachsichtig sein.

Wer's besser kann/weiß: Für Tipps, Ratschläge etc. . . . wäre ich dankbar.

Anbei noch zwei Links: Die CSV-Datei und ein MySQL-Dump zum Füllen einer Tabelle:


Link zur CSV-Datei: www.net-comm.de/ortsuche/postleitzahlen_csv.zip

Link zum MySQL-Dump: www.net-comm.de/ortsuche/postleitzahlen_sql_dump.zip


Gruß
Günni
Mitglied: 129963
30.06.2016 um 19:08 Uhr
Der Post liegt schon etwas zurück ich versuche trotzdem Hilfe zu erhalten.
Das Script funktioniert nicht mehr richtig oder ich hab irgendwas falsch gemacht.
Im gleichen Ordner sind die csv-Datei und die index.php mit dem untersten Script.
Beim öffnen der Seite index.php sind außer einige UTF-8 Codierungsfehler auch wie auf der Demo-Seite Input und Select-Feld.
Beim Eingeben von der PLZ passiert rein garnichts nicht mal dann, wenn ich auf Absenden drück.
Laut Quellcode wurden keine Daten aus der csv-Datei ausgelesen und an das Javascript übergeben denn die "keys" sind leer.

01.
<script type="text/javascript"> 
02.
<!--  
03.
var plz_verzeichnis = ; 
04.
// --> 
05.
</script>
Wäre schön wenn mir geholfen werden könnte.
Achja, Dateiberechtigung für die Postleitzahlen hab ich zwischenzeitlich auch mal durchprobiert leider ohne Erfolg.
Bitte warten ..
Mitglied: kuddeldaddeldu
05.08.2017 um 19:45 Uhr
Hallo!
Ich habe ein ähnliches Problem.
Es wird nach Eingabe der PLZ keine Auswahl angezeigt (Dropdownfeld bleibt leer).
Auch bei mir bleibt "plz_verzeichnis" leer.
Anders, als bei meinem Vorschreiber bekomme ich keine Fehlermeldungen.
Und: auf der Demoseite funktioniert es tadellos - so, wie man es erwartet.

Wäre wirklich gut, wenn jemand helfen könnte, weil ich dieses klasse Script gerne in mein Formular einbauen möchte.

Vielen Dank!
Kuddeldaddeldu
Bitte warten ..
Ähnliche Inhalte
Entwicklung

Mit JQuery Formulardaten senden ohne Seitenaktualisierung

Anleitung von GuenniEntwicklung

Immer öfter äußern Forenuser den Wunsch, Formulardaten zu senden, ohne dass eine Aktualisierung der Seite stattfindet. Da es sich ...

Windows Server

Microsoft Web Platform Installer 5.0 - Gängige Webserver-Dienste (PHP - MySQL - CMS - Blogs etc.) schnell und einfach installiert

Tipp von colinardoWindows Server5 Kommentare

Ein Tipp für alle die das Tool noch nicht kennen. Es bietet einen Assistenten zur Installation von gängigen Webserver-Diensten ...

PHP

PHP RFC: Mcrypt Extension wird ab PHP 7.2 entfernt

Information von FrankPHP

Ein RFC ist grob eine Abstimmung unter den PHP-Entwicklern, um neue, bestehende oder alte Feature hinzuzufügen, zu ändern, oder ...

PHP

PHP 7.2 veröffentlicht

Information von FrankPHP

Das PHP-Team hat heute, den 30.11.207 die aktuelle Version von PHP 7.2 veröffentlicht. Eine der wichtigsten Änderungen für PHP-Entwickler ...

Neue Wissensbeiträge
Internet

Europa baut Zensurinfrastruktur auf: EU-Parlament stimmt für Upload-Filter, Leistungsschutzrecht und gegen KI-Forschung

Information von Frank vor 2 TagenInternet9 Kommentare

Eine sehr schlechte Entscheidungen für die Zukunft Europas ist gefallen: Der Rechtsausschuss im EU-Parlament stimmte heute morgen in einer ...

Windows 10

Mikrofon von Headset geht nach Update auf Windows 10 1803 nicht mehr

Tipp von Deepsys vor 4 TagenWindows 102 Kommentare

Ich verwende ein Plantronics Headset das per USB mit dem Windows 10 PC verbunden ist. Damit kann ich auch ...

Video & Streaming

Ruckelfreies Fernsehen auf Smartphone oder Tablet - in SD oder gar HD - Eine Alternative zum Fritz DVB-C Receiver

Anleitung von power-user vor 4 TagenVideo & Streaming9 Kommentare

Wer kennt das nicht: Man möchte gemütlich auf dem Balkon sitzen und vielleicht grillen und dabei das WM-Spiel gucken ...

Erkennung und -Abwehr
Trendmicro WFBS 10 ist in deutsch verfügbar!
Tipp von VGem-e vor 5 TagenErkennung und -Abwehr4 Kommentare

Servus Kollegen, downloadbar unter

Heiß diskutierte Inhalte
LAN, WAN, Wireless
WLAN-Übersicht wie FritzWLAN jedoch für PC gesucht
gelöst Frage von HenereLAN, WAN, Wireless16 Kommentare

Servus, ich suche für einen Windows PC eine Anwendung die so ähnlich wie die FritzWLAN App auf dem Smartphone ...

Netzwerke
Netzwerkkommunikation von Windows 10 aus Freigabe mit Windows XP funktioniert nicht
gelöst Frage von KLinnebankNetzwerke14 Kommentare

Hallo werte Gemeinde, ja, es ist Freitag. Aber das ist KEINE Freitagsfrage Ich habe ein für mich völlig wirres ...

Festplatten, SSD, Raid
Server Architektur mit RAID 5 - wozu interne Platten?
Frage von Pierre78Festplatten, SSD, Raid10 Kommentare

Hallo, ich beschäftige mich gerade mit RAID Systemen. Ich habe mir einen gebrauchten Dell PowerEdge R515 gekauft. Dieser hat ...

Samba
Netzlaufwerk über VPN hat Probleme
Frage von geocastSamba8 Kommentare

Hallo Zusammen Ich habe hier ein QNAP TS-269 Pro (aktuellste Firmware) NAS in einem entfernten Standort, der über VPN ...