✔ Was benötige ich um Google Suggest abzubilden?

atlantyz · 29. Juni 2010

Hallo Leute,

ich möchte auf meiner Website sowas wie Google Suggest haben (beim tippen werden automatisch schon Treffer angezeigt). Nun habe ich gegoogelt und auch ganz viele Infos gefunden, aber auch viele verschiedene Meinungen, was man denn nun eigentlich benötigt um dies nachzubilden.

Also zunächst folgendes: ich habe eine MySQL Datenbank, in der die Daten für das Füllen dieses Feldes drin liegen (es sind Kunden- Namen).

Ich habe nun gelesen, dass man JSON benötigt, um die Daten richtig vorzubereiten. Ist das standardmäßig installiert oder benötigt man dafür ein spezielles Pakage? bin bei der Suche über ein PEAR- Paket gestoßen, was man angeblich unbedingt braucht. Hier im Forum wird aber davon gesprochen, dass PHP die Funktionen dafür schon standardmäßig mitbringt.

Desweiteren bin ich dann über DOJO gestolpert, das wohl ohne großen Aufwand diese Google Suggest Funktion darstellen kann, wenn es die vorbereitete JSON- Datei erhält. Kennt jemand DOJO und weiß, ob man das wirklich dafür benötigt oder lässt sich das Ganze auch leicht mit Javascript umsetzen?

Ich hab heute leider zum ersten Mal was von JSON gehört und auch in Javascript bin ich eine absolute Niete und kämpfe gerade mit einem Buch, was zwar tolle Techniken theoretisch beschreibt, mich aber kein Stück weiter bringt.

Ich weiß leider im Moment gar nicht, wie ich da überhaupt anfangen soll, weil mir die ganzen oben beschriebenen Grundkenntnisse überhaupt noch fehlen.

Vielleicht kann mich ja mal einer aufklären, damit ich mich dann langsam ans probieren wagen kann.

Sven Mintel · 30. Juni 2010

Moin,

erstmal zu JSON:
man benötigt es nicht unbedingt, um soetwas umzusetzen, es ist halt eine von mehreren Möglichkeiten, aber durchaus empfehlenswert für die Verwendung.
In PHP sind die nötigen Funktionen bereits vorhhanden: [phpf]json_encode[/phpf] & [phpf]json_decode[/phpf]
In JS sind sie derzeit noch nicht implementiert(zumindest nicht browserübergreifend, möglicherweise bringen das Browser mittlerweile schon von Hause aus mit...für die Zukunft ist das geplant).
Ein Skript, um es einzusetzen, findest du hier:
Beschreibung: http://www.json.org/js.html
Source: http://www.json.org/json2.js

Zur Umsetzung:
Hilfsmittel dafür bringen die meisten JS-Frameworks bereits mit.
Es lässt sich allerdings auch ohne solche Frameworks umsetzen, denn diese basieren schliesslich auch nur auf Javascript.

Der generelle Ablauf:

Es werden Eingaben in ein Textfeld überwacht
bei Eingabe wird der eingegebene String per AJAX an den Server übertragen
der Server sammelt die Treffer und antwortet damit(bspw. in Form von JSON)
das clientseitige Skript empfängt die Treffer und zeigt sie in einem direkt unter dem Textfeld platzierten Container an

atlantyz · 30. Juni 2010

Danke für deine Informationen, das hilft mir schon sehr weiter.

Eine Verständnisfrage habe ich aber noch:

Wenn ich mit PHP die Daten in JSON umkonvertieren möchte, muss ich dann eine spezielle Datei erstellen, die eine bestimmte Dateiendung hat? Weil normal hat die PHP Datei ja auch .php als Endung.

Johannes7146 · 30. Juni 2010

Schau doch einfach mal hier: http://de.wikipedia.org/wiki/JSON
Du musst einfach nur ein Objekt in einer ganz bestimmten notation übertragen.
Dafür musst du keine Datei anlegen (also auch keine Endung). Sondern einfach einen String per Ajax übertragen.

Code:

{
  "Kreditkarte" : "Xema",
  "Nummer"      : "1234-5678-9012-3456",
  "Inhaber"       : {
    "Name"        : "Reich",
    "Vorname"     : "Rainer",
    "Geschlecht"  : "männlich",
    "Vorlieben"   : [ "Reiten", "Schwimmen", "Lesen" ],
    "Alter"       : null
  },
  "Deckung"     : 2e+6,
  "Währung"     : "EURO"
}

Diesen Code dann wiegesagt per Ajax übertragen. Und im JS auf der Client seite dann wiefolgt darauf zugreifen:

Code:

var myFirstJSON = {
  "Kreditkarte" : "Xema",
  "Nummer"      : "1234-5678-9012-3456",
  "Inhaber"       : {
    "Name"        : "Reich",
    "Vorname"     : "Rainer",
    "Geschlecht"  : "männlich",
    "Vorlieben"   : [ "Reiten", "Schwimmen", "Lesen" ],
    "Alter"       : null
  },
  "Deckung"     : 2e+6,
  "Währung"     : "EURO"
}

alert(myFirstJSON.Nummer);
alert(myFirstJSON.Inhaber.Name);

Also nochmal zusammengefasst:
1. Den code aus dem oberen Beispiel als einen einzigen String in php zusammen setzen.
2. Diesen String per Ajax übertragen
3. Den String wie im 2. Codebeispiel nutzen um darauf zuzugreifen.

Wenn du allerdings eh nur eine Liste mit vorschlägen übertragen möchtest, ist JSON meiner Meinung nach aber garnicht notwendig.
Da kannst die Vorschläge doch einfach durch Kommata getrennt per Ajax übertragen und dann einblenden.
JSON lohnt sich eher bei komplexere Strukturen, um diese abzubilden und einfacher darauf zuzugreifen.

Sven Mintel · 30. Juni 2010

atlantyz hat gesagt.:
Wenn ich mit PHP die Daten in JSON umkonvertieren möchte, muss ich dann eine spezielle Datei erstellen, die eine bestimmte Dateiendung hat? Weil normal hat die PHP Datei ja auch .php als Endung.

Von JS-Seite aus gesehen ist die Endung egal, *.php wäre serverseitig natürlich vorteilhaft, damit der PHP-Code darin verarbeitet werden kann.

Johannes7146 · 30. Juni 2010

Achos, ich hatte die frage so verstanden, dass er nicht wusste in welchem Format er den JSON-CODE ablegen soll...
Der Code, welcher den JSON code erstellt wird wsl php sein.

da ist .php natürlich vorteilhaft ^^

atlantyz · 30. Juni 2010

Also, ich habe mein erstes Skript nun erfolgreich umgesetzt (habe dabei das oben beschriebene Dojo verwendet) und habe auf eine JSON DAtei, bzw. auf Daten in diesem Format verzichtet. Stattdessen habe ich die Werte aus der Datenbank mit PHP im Dojo- Skript ausgeben lassen und es funktioniert auch recht flott und stabil. Ob das natürlich jetzt eine saubere Lösung ist, weiß ich nicht, aber es erfüllt seinen Zweck.

Ich möchte mich aber hier auch nochmal vielmals für die Hilfe und die Geduld bedanken. Falls ich nicht weiter komme, werden wir sicher nochmal was voneinander lesen (stehe ja am Anfang meiner Javascript Programmiererei).

Liebe Grüße
Joey

Slin61 · 2. Juli 2010

Ich würde gerne auch so ein Suggest machen, aber ich kenn mich nur mit html und ein wenig mit php aus.

@Atlantyz

Kannst du den Code mal reinstellen mit Variablen?

Das würde mir schon sehr helfen

atlantyz · 5. Juli 2010

Also, um das umzusetzen, benötigst du erstmal Dojo (Dojo Download). Lade dir dort das Toolkit runter, das musst du dann auf deinen Server packen (alternativ kann man Dojo auch über einen Link ausführen lassen, den die Seite bereit hält (s. Dojo Download - Dojo from Google CDN).

Dann musst du ein PHP Skript schreiben:

PHP:

<?php
include_once"./exe/funktionen.php";
db_connect();
$sqlab = "select * from kunde order by kunde_name";
$erg = mysql_query($sqlab);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
    
    <head>
        <link rel="stylesheet" type="text/css" href="./exe/dojo/dijit/themes/tundra/tundra.css"
        />
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
    </head>
    
    <body class=" tundra ">
        <select dojoType="dijit.form.ComboBox" id="kunde" name="kunde">
        <option></option>
        <?php while($var = mysql_fetch_assoc($erg)) {
           echo "<option>" . $var["kunde_name"]. ", ". $var["kunde_vorname"]."</option>";
        } ?>
        </select>
    </body>
    <script type="text/javascript" src="./exe/dojo/dojo/dojo.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.form.ComboBox");
    </script>
</html>

Bei mir wird die Verbindung zur Datenbank über das Script "funktionen.php" ausgeführt. Das sieht folgendermaßen aus:

PHP:

function db_connect(){
   mysql_connect("","root","");
   mysql_select_db("edv");
}

(Dass die Verbindung zur Datenbank über root erfolgt und kein PW hat, ist nur in meiner Testumgebung so! Bei einem Livesystem solltest du unbedingt den Datenbankzugriff Passwortsichern!)

Den Pfad zu Dojo

Code:

<script type="text/javascript" src="./exe/dojo/dojo/dojo.js"

und

Code:

 <link rel="stylesheet" type="text/css" href="./exe/dojo/dijit/themes/tundra/tundra.css"

musst du halt dann auf dein System anpassen (Ordner, wo Dojo liegt, bzw. Pfad zum CDN)

Beispiele für die Combobox mit Dojo gibt es hier:

ComboBox

Beim Tippen in das Feld werden Vorschläge gemacht, man kann aber auch aus dem Drop- Down Feld wählen. Das finde ich ideal.

Gruß Joey

✔ Was benötige ich um Google Suggest abzubilden?

atlantyz

Erfahrenes Mitglied

Sven Mintel

Mitglied

atlantyz

Erfahrenes Mitglied

Johannes7146

Goldschnabel

Sven Mintel

Mitglied

Johannes7146

Goldschnabel

atlantyz

Erfahrenes Mitglied

Slin61

atlantyz

Erfahrenes Mitglied

Neue Beiträge