Wie programmiere ich eine Autovervollständigung für die Ortssuche auf einer Website?

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

man kennt das ja von vielen Webseiten wie z.B. eBay-Kleinanzeigen oder Markt.de: In einem Suchfeld soll ich den Ort oder die PLZ angeben, und schon während der Eingabe werden mir Orte zum Auswählen vorgeschlagen, manchmal auch Ortsteile, oder auch Orte/Ortsteile mit PLZ.

Meine Frage: Wie programmiere ich so was möglichst schnell und einfach (ohne allzu tief in die Scriptsprache einzusteigen)? Da es das ja schon hundertfach gibt, gibt es sicherlich entsprechende Unterroutinen, die man nur einbinden muss. Aber wie geschieht das? Mit Javascript? Kann mir jemand die entsprechenden Routinen und Befehle nennen?

Alternativ: Wie lange würde ein erfahrener Webdesigner / Webprogrammierer brauchen, um so was auf einer bestehenden (mit PHP geschriebenen) Website einzupflegen? (D.h. was würde das ungefähr kosten?)

Ich bedanke mich für Ihre Hilfe.

#2

Hallo,
ich kann uberhaupt nichts zu der programmiertechnischen Sache sagen, aber im Prinzip ist das eine SPARQL- oder SQL-Abfrage (oder ein API-Aufruf zu einem Drittanbieter). Im Wesentlichen kommt es auf die Datenbasis an.

Es gibt fertige APIs oder rohe Datensätze. Du mußt Dich zwischen kommerziellen und freien Anbietern entscheiden (genaueres in den jeweiligen Lizenztexten) und natürlich, wieviele Features Du brauchst (geographische Regionen, mit Straßenabgleich, mit Hausnummernabgleich, Rückgabe von Koordinaten, Polygonen, etc.)

#3

Genau, es ist im Prinzip eine einfache Datenbank-Abfrage auf vorhandene Einträge, die man entweder in einer eigenen Datentabelle pflegt oder über eine Schnittstelle bei einem Fremdanbieter.
Geht auch mit PHP. Mit Javascript eher nicht.

Beatrix

#4

Hi!

Ähm, wie soll diese dynamische „Autovervollständigung“ ohne JavaScript nur rein mit PHP funktionieren?
Das Eine schließt ja das andere nicht aus, aber nur mit PHP wird das dynamisch wohl eher nix - außer siehe nächsten Absatz an UP.

An den UP:
Aber glücklicherweise gibt es ja bereits HTML5 und hier ist die Autovervollständigungsfunktionalität (Super Wort!) inkludiert - Google ist dein Freund.

Und jetzt das „Aber“, das schon beschrieben worden ist: die Datenbasis.
Sicher kann man in den HTML5-Code statisch alles reinklopfen, allerdings wird hier eine lokale oder eine Fern-Datenbank bzw. die Abfrage darauf einfacher und schneller zu realisieren sein.

Grüße,
Tomh

#5

Meinst du mit lokaler DB die, wo ich auch sonst mit meinem PHP drauf zugreife?

Ich dachte, dass die Daten quasi vom PHP ans Javascript (oder ans HTML5) gereicht werden, in dem Moment, wo sich die Seite aufbaut. Denn ab dem Moment, wo der User die Seite sieht (und lostippen kann), müssen die Daten (Orte mit PLZ) ja schon auf Client-Seite sein. Mir ist aber nicht klar, wie das konkret geht (wie z.B. die entsprechenden Befehle lauten).

Da es sich ja nur um Text handelt: Wäre es denn so schlimm, das hart ins HTML zu schreiben? Nicht sehr schön, klar, aber wenn man kein Javascript lernen will … Hätte es denn konkrete Nachteile, z.B. dass der Seitenaufbau viel länger dauert? Es gibt anscheinend ca. 20.000 Orte (Datensätze) in Deutschland.

Vielen Dank und viele Grüße
Niedermeier

#6

Einen rohen Datensatz hab ich schon, ich weiß nicht mehr, woher. Ich bin eigentlich davon ausgegangen, dass „alle Orte in Deutschland plus ihre Postleitzahl“ ein dermaßen häufig gebrauchter Datenbestand ist, dass es den gratis geben muss, so wie alles mit der Zeit in der IT-Welt gratis zu haben ist.

Woher soll ein Anbieter denn wissen, ob ich in dem Fall gerade SEINE Zusammenstellung von Ort+PLZ verwende? Die Zusammenstellungen müssten doch identisch sein.

#7

Ja, wie gesagt, es gibt auch freie Anbieter mit Creative Commons Lizenzen und dergleichen.

Ich verstehe den Kontext Deines Vorhabens allerdings noch nicht: Meine Postleitzahl ist 12345, die Vervollständigung macht dann 12345 Berlin draus, und weiter?

Und genau da setzt der Mehrwert einiger Anbieter ein, aber ohne das Gesamt- oder zumindest Nachfolgekonzept kann ich Dir auch nicht weiterhelfen. Willst Du das so programmieren, daß ein Miniproblemchen irgendwie gelöst wird, und der nächste in der Kette hat dann ein viel größeres Problem?

#8

Ja, genau, die Größe ist schon ein Nachteil. Laut geonames sind es 16478 Orte und 292 kB, alleine für die Liste, im JSON-Format nochmal ein paar kB mehr. Die muß der Browser ja auch erstmal verarbeiten. Und insgesamt soll ja vielleicht noch mehr Betriebslogik und Inhalt auf die Seite, oder?

#9

Aber ich muss die dem Browser doch so oder so irgendwie übergeben. Die Information muss ja auf dem Client sein in dem Moment, wo die Seite aufgebaut wird. So muss das doch auch bei eBay Kleinanzeigen u.a. Seiten auch sein. Macht es von der Performance her einen Unterschied, ob ich das

  • hart ins HTML5 schreibe
  • mit PHP generieren lasse von der DB (was letztlich ja derselbe HTML-Befehl ist, nur dass er dynamisch erzeugt wird)
  • irgendwie mit Javascript mache (ich hab noch nicht kapiert, wie)

?

#10

Also ich will genau das erreichen, was du bei eBay Kleinanzeigen oder Markt.de oder tausend anderen Seiten auch hast: Wenn der User ins Feld für „Ort“ Buchstaben eingibt, sollen ihm die entsprechenden Orte vorgeschlagen werden (z.B. „Berlin“, wenn er „be“ eintippt, damit er nicht so viel tippen muss.

Der Grund, warum ich so naiv frage, ist, dass jemand anders die Seite gemacht hat und nur PHP und HTML, aber kein Javascript kann. Ich bin der Meinung, dass wir unbedingt so eine Autovervollständigung brauchen (weil man das heutzutage hat), und würde das gerne ergänzen, und suche nach einer Möglichkeit, wie das geht, ohne dass ich wochenlang Javascript etc. lernen muss. Immerhin hab ich schon gelernt, dass ich ihm das HTML-Element datalist vorschlagen kann. Ich dachte bisher, so was geht nur mit Scripten.

#11

Client-seitig macht es keinen Unterschied, Server-seitig schon, denn PHP würde dann für jede Anfrage Deine Datenbank bemühen. Also von daher, hart ins HTML5 reinschreiben.

Die Javascript-Variante, die auch ebay benutzt, macht eine XHR-Anfrage bei jedem getippten Buchstaben, dementsprechend kommen bei B auch nur die Orte, die mit B anfangen, und das sind natürlich nur noch rd. 5% der Gesamtdaten. Aber Du hast schon recht: Sich ausschließlich für so ein Mikrofeature Javascript anzueignen, ist eine denkbar schlechte Motivation.

#12

Genau genommen würde PHP immer dann die DB abfragen über sämtliche Orte, wenn die Seite neu aufgebaut wird. Ich weiss jetzt nicht, wie das ist: Wird die Seite nicht so oder so komplett neu aufgebaut, wenn der User sucht, auch bei eBay? Dann würde auch jedes Mal die HTML-Seite vom Server angefordert, und somit die gesamte Datenmenge (der Orte) neu übertragen, egal ob hart in der HTML-Datei oder ob vom PHP generiert. Der Unterschied wäre nur die gesparte DB-Abfrage, die aber nicht lange dauern dürfte. Oder irre ich mich?

#13

Ähm, also ebay benutzt javascript und startet nach jedem getippten Buchstaben eine XHR-Anfrage (XMLHttpRequest), dabei geht als Parameter das bisher getippte Wort an einen Server (im ebay-Fall ein speziell dafür abgestellter), zurück kommt JSON mit der vervollständigten Liste und allerhand Zusatzinfos, z.B. Stadtteile, wieviele Kleinanzeigen in dem Ort eingestellt wurden, andere Orte in der Nähe und noch mehr. Der Rest der ebay-Seite wird selbstredend nicht noch einmal geholt und auch nicht neu aufgebaut, das wäre ja eine Performance-Katastrophe.

Wie gesagt, in Deinem vorgeschlagenen Fall ist der Unterschied zwischen Hart-Kodieren und PHP lediglich die Datenbankabfrage. Die entfällt im ersteren Fall. Die Datenmenge ist in beiden Fällen gleich.

Ich schlage vor, probier’s doch einfach einmal aus. Und wenn Du mit der Performance zufrieden bist, dann mach es so.

#14

Ok, gute Idee. Vielen Dank!