Ajax autocomplete + Bedingte Auswahl?

B

Blue

Grünschnabel
Hallo liebe Javascript / Ajax Profis,

Mein Vorhaben war, eine Adresssuche (fiktive Adressen) mit Autovervollständigen funktion zu bauen. Bei PHP.de gab man mir den Tipp, dass dies mit Ajax autocomplete zu bewerkstelligen sei.

Soweit auch kein Thema klappt eigentlich sogar...

ABER: Ich hätte jetzt gerne folgende Struktur (Beispiel)

Ort 1

Hauptstraße 1-150
Dorfstraße 1-103
Testweg 1-22

Ort 2

Meierstraße 1-80
Hauptsraße 150-300
Zwiebelgasse 1-91

So... Wenn ich jetzt bei dem eingabefeld "ORT" Ort 2 eingebe soll bei der Eingabe der Straßen logischerweise nur noch Meierstraße, Hauptstraße und Zwiebelgasse angezeigt werden.

Falls Hauptstraße ausgewählt wird dann bei den Hausnummern auch nur noch 150-300.
Bei den anderen beiden Straßen dann wie angegeben 1-80 und 1-91

Leider hatte bei Php.de niemand eine Idee wie man das umsetzt, daher versuche ich es nun hier. Ich würde mich wirklich sehr freuen, wenn ihr euch der Sache annehmt.

Wer kann mir da helfen/tipps geben, oder sogar eine Lösung ausarbeiten?
Vielen dank im voraus

Gruss Yannik
 
Zuletzt bearbeitet:
Moin Yannik,

das ist eigentlich eher eine Sache deines PHP-Skriptes.
Dies erhält ja als POST-Parameter den Inhalt des Eingabefeldes.
Anhand dessen muss es dann halt die Liste mit den gewünschten Vorschlägen generieren.

Wie genau das in deinem Fall passieren könnte, lässt sich besser sagen, wenn man weiss, woher du die Ergebnisse überhaupt holst.
 
Hallo Sven,

theoretisch hast du recht, praktisch war meine Erklärung wahrscheinlich nicht ganz eindeutig :D Es wird momentan noch nix per POST übergeben.

Das ganze soll ähnlich (oder genauso) wie auf dieser Seite links die Adresssuche funktionieren (einfach mal eine Adresse eintippen). Das aufklappen der Auswahl ist auch nicht das Problem... Das Problem ist, dass er mir bei den Straßen keine anzeigt, bzw. ich nicht weiß wie ich den Inhalt des Textfeldes verwerten kann.

Vllt ist das ganze mit dem Beispiel verständlicher...

Die Ergebnisse werden bei mir aktuell aus einer data.js geholt, die folgenden Aufbau besitzt.


var cities = ["Ort1", "Ort2"]

var ort1 = ["Hauptstraße", "Dorfstraße", "Testweg"]

var ort2 =["Hauptstraße", "Meierstraße", "Zwiebelgasse"]

Die Hausnummern sind noch nirgends zugeordnet

Gruss Yannik
 
Dann müsstest du dich jetzt erstmal entscheiden, was du willst :)

Das Thema lautet Ajax autocomplete + Bedingte Auswahl?
Ajax beinhaltet eine Kommunikation zwischen Client und Server, also z.B. in dem genannten Beispiel...da wird bei jeder Eingabe eine Anfrage an den Server geschickt, der mit den Daten antwortet.

Hier mal die Antwort, wenn ich dort "Berg" eingebe:
http://www.geodaten.bayern.de/dyn/v...dresse&ort=bergh&phonetisch=nein&limit=400&_=

Soetwas ist in vielen JS-Frameworks bereits implementiert, so dass man es ohne viel Arbeit einsetzen kann, bspw: Scriptaculous:AJAX.autocompleter


Das, was du da mit dem JS-Array machst, hat jedoch nichts mit AJAX zu tun, also was darf es sein, Tor 1 oder Tor 2 ? :suspekt:
 
Hallo Sven,

schon einmal schönen dank für die bisherige Hilfe.

In dem Fall bin ich dann für die Variante vom Bayernviewer.

Vllt kannst du mir ja noch einen Tipp geben, wie ich das ganze sinnvoll anfangen muss.

Leider ist es so, dass ich meistens Php nutze und habe in diesem Fall als absolut unwissender zu Javascript greifen müssen :) Wobei es eine nette Sprache ist.

Gruss Yannik
 
Japs habe ich ... Danke dafür!

Hauptproblem ist allerdings, dass ich nach der Ortseingabe die Straßen den Orten nicht zuordnen kann.

Aber ich werde nochmal alles genau durchlesen :)

Nun aber wünsche ich eine gute Nacht :) Ich kann den Code grad nichmehr sehen :D
 
So hier ich nochmal.

Ich habe mir jetzt aus einem Tutorial folgenden Code gebastelt:

Index.html
HTML: 
<html>
<head><title>Straßenverzeichniss</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

<style type="text/css">
.ac_input {
	width: 400px;
}
.ac_results {
	width: 395px;
	background: #fee;
	cursor: pointer;
	position: absolute;
	left: 0;
	font-size: 90%;
	z-index: 101;
}
.ac_results ul {
	width: 395px;
	list-style: none;
	padding: 0px;
	margin: 0px;
	border: 1px solid #000;
}
.ac_results li {
	width: 385px;
	padding: 2px 5px;
}
.ac_results a {
	width: 100%;
}
/* thanks udoline: this fixed position error into msie */
.ac_results iframe {
	width: 395px;
	position: absolute;
}
.ac_loading {
	background : url('/indicator.gif') right center no-repeat;
}
.over {
	background: yellow;
}
</style></head>

<body>

<p>Ort:<input id="autocomplete" type='text' cols="150"></p>

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


</script>
</div>
</body>
</html>

search.php
PHP: 
<?php

error_reporting(E_ALL);
include("connect.php");

$res = mysql_query("SELECT * FROM list WHERE ORT LIKE '".$_GET['q']."%' ORDER BY PLZ");
while($row=mysql_fetch_object($res)) {
 echo $row->ORT.'|'.$row->PLZ."\n";
}

?>

Funktioniert wunderbar! Doch wie kann ich diesen Orten jetzt noch die Straßen zuordnen?

Wie immer :) vielen Dank im vorraus!

Gruss Yannik
 
Da musst du deine Datenbankabfrage umstellen.
Wie genau, kann ich nicht sagen, ohne die DB-Struktur zu Kennen, Ergebnis sollte jedoch soetwas sein:
Code: 
ort|plz|strasse
 
Mmh das würde einleuchten...

Aber kann ich dann die Straßen auch per Autocomplete abfragen? Das Ding weiß ja da noch nicht welcher Ort gewählt wurde?

Ich finde es auf jeden Fall sehr toll :) dass du dir so viel Zeit für mein Thema nimmst!

Datenbankstruktur ist so wie du vorgeschlagen hast
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück