✔ jquery autocomplete ausgabe speichern

[mariatroeger]

Hallo, ich bin neu hier und beschäftige micih schon seit einiger Zeit mit dem Thema "autocomplete"!

Ich nutze folgende die jquery ui autocomplete mit Anbindung an einer DAtenbank

Meine Tabelle hat 3 Spalten Land | Bundesland | Stadt

Ziel des Projekts: anhand des autocomplete soll man eine Stadt auswählen können wonach der entsprechende Weg vom bestimmten Standort dargestellt werden soll.

D.h. der Eintrag "Bundesland" soll 1. als Text dargestellt werden und 2. der Weg soll als (SVG) gezeichnet werden.


zu 1. ist es kein Problem!

nur weiss ich nicht wie ich den ausgewählten Wert für "Bundesland" so speichern kann,
damit der entsprechende DIV geöffnet werden kann ?!


Dachte an einer If-Abfrage ... wenn Eintrag Bundesland = Hessen , führe aus Div #hessen oder so !

$(document).ready(function()
{   
    $( "#project" ).autocomplete(
    {
      minLength: 2,
      source: 'datenbankverbindung.php',
      focus: function( event, ui )     {
        $( "#project" ).val( ui.item.label );
       return false;
    },
      select: function( event, ui ) 
{
        $( "#stadt" ).html( ui.item.value_stadt );
    $( "#bundesland" ).html( ui.item.value_bundesland);
    $( "#land" ).html( ui.item.value_land);  
               
        return false;
    }
})

});

  </script>



<!-- Der HTML TEIL --> 

<p id="stadt"></p>
<p id="bundesland">Bundesland</p>
<p id="land">Land</p>



...


<div id="hessen"
<svg code ... </svg>
</div>


<div id="bayern"
<svg code ... </svg>
</div>

<div id="bremen"
<svg code ... </svg>
</div>

...

Für jede Hilfe wäre ich seeehhhrr dankbar ;-)

VG
Mari

 

[Sempervivum]

Wie Du den Weg in einem SVG zeichnen kannst, kann ich dir leider nicht sagen. Was meinst mit "diff öffnen" bzw. "div ausführen"? Wenn es nur darum geht, das div des betr. Bundeslandes sichtbar zu machen, ist es sehr einfach:
Eine Verkettung von ifs würde ich nicht empfehlen, sondern: Anscheinend ist ja die ID des Bundeslandes immer gleich dem Namen in Kleinschreibung. Dann könntest Du direkt den Namen verwenden, um das div anzusprechen:

var id = ui.item.value_bundesland.toLowerCase();
document.getElementById(id).style.display = "block";

Wenn die ID nicht gleich dem Namen ist und wenn Du die ID nicht entsprechend setzen kannst, würde ich empfehlen, die Zuordnung in einem ass. Array abzulegen.

 

[mariatroeger]

Hi, vielen Dank für deine Hilfe aber irgendwie klappt das bei mir nicht so ganz !?

Die Kleinschreibung der Bundesländer ist nicht relevant , eher nur Zufall ;-)

1. wo genau soll ich den Code reinpacken ?
2. wie müssen die DIV-Container aussehen, damit diese vorher ausgeblendet sind ...
3. bzw. wie müssen die DIV´s aussehen damit diese wieder eingeblendet werden ??

nochmals vielen vielen Dank Sempervivum

 

[Sempervivum]

Leider schreibst Du nichts dazu, ob Du die IDs der divs anpassen kannst. Davon hängt es nämlich ab, ob Du diese einfache Lösung verwenden kannst oder ein Array mit der Zuordnung anlegen musst.

1. wo genau soll ich den Code reinpacken ?

Ich würde sagen, dort, wo Du auch die Texte anzeigst:

    $( "#stadt" ).html( ui.item.value_stadt );
    $( "#bundesland" ).html( ui.item.value_bundesland);
    $( "#land" ).html( ui.item.value_land);   
    var id = ui.item.value_bundesland.toLowerCase();
    $("#" + id).css("display", "block");

(Habe es jetzt mal mit jQuery geschrieben, weil Du das sonst auch benutzt.)

2. wie müssen die DIV-Container aussehen, damit diese vorher ausgeblendet sind ...

<div id="hessen" style="display: none;">
<svg code ... </svg>
</div>
<div id="bayern" style="display: none;">
<svg code ... </svg>
</div>
<div id="bremen" style="display: none;">
<svg code ... </svg>
</div>

(Du hattest die schließenden Klammern vergessen.)

3. bzw. wie müssen die DIV´s aussehen damit diese wieder eingeblendet werden ??

Das CSS wird mit der jQuery-Anweisung so geändert, dass das betr. div eingeblendet wird.

 

[mariatroeger]

Sempervivum, ich muss sagen, du bist Genial ;-)

Das einzige Problem was mir auffällt, dass wenn beispielsweise der div "hessen" erscheint, und man einen weiteren Eintrag für bsp. div "bayern" auswählt, erscheinen beide Div´s, d.h. der erste Div (in diesem Fall "hessen" ) ist noch zu sehen ... wähle ich anschließend den Eintrag für "bremen" habe ich alle drei Div´s auf´n Bildschirm ...

wenn ich aber die Seite neu lade, verschwinden alle Div´s wieder !!

Im Input Feld ist es wohl ein Unterschied ob ich den ausgewählten Eintrag entferne (ohne die Seite neu zu laden) um dann ein neues Suchbegriff einzugeben , oder ob ich jedesmal die Seite neu lade um ein neues Suchbegriff einzugeben , mmhhhh !

Kann man das mit "toggle" oder ähnl. umgehen , wenn ja , wie kann man das in meinem Fall umsetzen , oder gibt es eine elegantere Lösung ?

Nochmals vielen Dank für die Mühe ;-)

 

[Sempervivum]

Das lässt sich relativ einfach beheben: Gib den divs eine Klasse, z. B. "bundesland", damit Du sie mit jQuery ansprechen kannst. Dann blendest Du zunächst alle aus und den richtigen ein:

    $( "#stadt" ).html( ui.item.value_stadt );
    $( "#bundesland" ).html( ui.item.value_bundesland);
    $( "#land" ).html( ui.item.value_land); 
    $(".bundesland").css("display", "none");
    var id = ui.item.value_bundesland.toLowerCase();
    $("#" + id).css("display", "block");

 

[mariatroeger]

YEAHHHH , THEMA GELÖST

VIEEELLLLENNN DANK , Sempervivum , du bist ein Schatz ;-)

 

[mariatroeger]

Hallo, ich nochmal ;-)

wie kann ich die Umlaute richtig zeigen - mit "oe" als "ö" sieht nciht gerade schick aus - in der Datenbank ist der Eintrag bsp. für Thüringen eben mit ü , doch als Div id kann ich "thüringen" nicht ansprechen , passiert nichts ?!

DIe Datenbank ist mit UTF-8 konvertiert bzw. die CSV.

Durch:
mysql_query("SET NAMES 'utf8'");
mysql_query("SET CHARACTER SET 'utf8'");

werden die Bundesländer mit dem Umlaut dargestellt.

Und im Header steht ebenfalls der Eintrag "<meta charset="UTF-8">"

doch irgendwie kann ich id´s mit umlaute nicht ansprechen ?

Für jede Hilfe bin ich sehr dankbar.

 

[SpiceLab]

doch als Div id kann ich "thüringen" nicht ansprechen , passiert nichts ?!
[...]
doch irgendwie kann ich id´s mit umlaute nicht ansprechen ?

Ich schon

http://jsfiddle.net/spicelab/n6vtuzvx/

... und sollte damit auch auf Deinen Anwendungsfall zutreffen.

Für jede Hilfe bin ich sehr dankbar.

Kannst Du den erfolglosen Versuch bitte mal zeigen, um sich dazu näher äußern zu können?

Ansonsten, weil da ja eine DB im Spiel ist, wäre der Link zur Seite ganz hilfreich

 

[mariatroeger]

Hi SpiceLab , bei mir hat es doch noch geklappt, hatte sich nur ein kleiner Fehlerteufel eingeschlichen ;-)

Also nochmals vielen Dank für die tolle Hilfe - durch die Lösung des Projekts haben wir uns überlegt, eine art
Verzeichnis für Vokabeln mit entsprechenden Bildern zu "basteln". Vom Prinzip passt das mit Projekt mit den Bundesländern.

Wie aber können Bilder dargestellt werden ? geplant sind mehrere tausend Bilder (ca. 50.000) und natürlich suche ich jetzt nach der günstigsten Methode dies umzusetzen. Ich meine, sollte ich am besten eine weitere Spalte anlegen mit der entsprechenden Bezeichnung des Bildes , oder wie kann ich die Bilder verlinken ?

Von der Struktur her habe ich es mir folgendermaßen vorgestellt:

Datenbank1 Tabelle - Tiere
ID | Deutsches | Englisches | Bild
1 | Affe | Monkey | bild-affe.jpg

über den weblink erreiche ich die Bilder www.meineseite.de/image/tiere/bild-affe.jpg

Doch was habe ich bei der Verlinkung zu beachten - und hat jemand Erfahrung bezüglich solch grosser Datenmengen (Dateigrööse noch unbekannt) ???

Für jede Hilfe bin ich wie immer sehr dankbar ;-)

grüsse
mari