✔ jquery autocomplete ausgabe speichern

Hallo Mari,
interessante Aufgabe. Wenn ich das richtig verstehe, willst Du die deutsche und die englische Bezeichnung anzeigen und auf Mausklick das Bild aufblenden. Dafür brauchst Du keine Spalte mit der Bezeichnung des Bildes, sondern kannst die Bezeichnungen direkt anklickbar machen:
Code: 
<a href="bild-affe.jpg">Affe - Monkey</a>
Bei meinen Bildern verwende ich eine Dateigröße von 100 - 200 KB für einen guten Kompromiss zwischen Größe und Qualität, bei einer Abmessung von ca. 800x600 px. Bei deinen 50.000 wäre das ein Speicherbedarf von 5 bis 10 GB. Kein Problem, dafür Webspace zu bekommen.
Um die Ladezeit gering zu halten und um die Sache für den Besucher übersichtlich zu halten, würde ich bei der großen Anzahl von Bildern empfehlen, die Bilder und Begriffe in Kategorien einzuteilen, z. B. Tiere, Pflanzen, Menschen, Gebäude etc.
Für die Anzeige der Bilder würde sich eine Lightbox anbieten. Du kannst dir dies ja mal ansehen, ob dir das zusagen würde.
Man könnte daran denken, ein fertiges Galerieskript zu verwenden. Diese zeigen jedoch neben der Bezeichnung auch ein Vorschaubild an. Prüfe mal, ob das für dich in Frage kommt.
Hier ein Beispiel einer Galerie mit Kategorien:
http://demo.4homepages.de/
Allerdings wären wohl Anpassungen nötig, um die Bilder und Begriffe aus deiner Datenbank herauszuziehen. Daher ist es u. U. günstiger, es selber aufzubauen.
 
Zuletzt bearbeitet:
@SpiceLab , das zweite war´s ;-)

@Sempervivum: müsste ich jeden Begriff um den <a> tag ergänzen , oder wie funktioniert sowas innerhalb der Tabelle ?

Habe mich nach diesem Beispiel orientiert ! Daher kam ich auf die Idee eine weitere Spalte einzufügen

Code: 
 <script>
  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];
    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });
  </script>

Jedoch wüsste ich nicht wie ich das in Verbindung mit der DB umsetzen kann.

vg
mari
 
Ich konnte dir erst nicht folgen, aber ich glaube, jetzt verstehe ich dich: Du möchtest in den Vorschlägen des Autocomplete einen Link anbringen, so dass man durch Klick darauf das Bild öffnen kann? In dem Fall würde ich das a-Tag in dem Feld desc einfügen.
Jedoch wüsste ich nicht wie ich das in Verbindung mit der DB umsetzen kann.
Zum Vergrößern anklicken....
Du könntest den Code für die source-Struktur auf Grund der Parameter in der Datenbank durch echo generieren.
müsste ich jeden Begriff um den <a> tag ergänzen[/QUOT0]Ich würde sagen ja, denn Du brauchst ja für jeden Begriff ein anderes Bild.
Zum Vergrößern anklicken....
Möglicherweise ist es auch möglich, das a-Tag um das Icon herum zu legen, so dass sich das Bild durch Klick auf das Icon öffnet.
 
Du möchtest in den Vorschlägen des Autocomplete einen Link anbringen, so dass man durch Klick darauf das Bild öffnen kann?
Zum Vergrößern anklicken....

genauso soll es sein , sobald etwas ausgewählt wird, erscheint das entsprechende Bidl an Position XY !

Du könntest den Code für die source-Struktur auf Grund der Parameter in der Datenbank durch echo generieren
Zum Vergrößern anklicken....

Oje, jetzt kann ich dir nicht folgen :(

$( "#project-bild" ).attr( "src", "Pfad zum Webserver ... images/" + ui.item.icon );

<?php echo '<img src=" #project-bild " alt="">'; ?> ???? mmhhh
 
sobald etwas ausgewählt wird, erscheint das entsprechende Bidl an Position XY !
Zum Vergrößern anklicken....
Also soll das Bild erst auf Klick aufgeblendet werden oder automatisch sobald eine Option ausgewählt wird?
Oje, jetzt kann ich dir nicht folgen
Zum Vergrößern anklicken....
Ich empfehle dir, es zunächst mal ohne Datenbank zum Laufen zu bringen. Anschließend kannst Du die Struktur projects aus der Datenbank generieren bzw. mit JSON übergeben. AFAIK gibt es auch Autocompletes, die die Vorschläge durch Ajax auslesen. Offenbar geht das auch bei deinem, sieh dir mal dieses an:
https://jqueryui.com/autocomplete/#remote-jsonp
 
Zuletzt bearbeitet:
Hi Sempervivum , endlich wieder zurück daheim ;-)

Sorry, dass ich mich jetzt erst zurück melde , war auf einer Safari in Südafrika und dort hatten wir kein Internet - wie schrecklich ;-)


Ich habe dein Tipp befolgt und habe es zum laufen gebracht, es funktioniert wie gewünscht , nochmals vielen vielen DAnk ! Fühl dich gedrückt ;-)

LG
mari
 
Eine Sache noch ... könnte man mit jquery auch Inhalte fremder Webseiten auslesen und auf der eigenen Seite darstellen, oder sollte man dafür eher auf PHP zurückgreifen?

Vorab: Das Thema Urheberrecht etc. ist hier nicht das Thema

LG
mari
 
Willkommen zurück in Deutschland.
Zu einer Safari fährt man doch, um man von der Technisierten Welt abstand zu gewinnen. ;)
Da ist dann doch die Hauptsache der Urlaub war schön.

Back to topic.
Die meisten modernen Browser verhindern dieses verhalten dank der Same Origin Policy.
Es gibt zwar Möglichkeiten diese zu umgehen, allerdings sind zum teil einige dieser Möglichkeiten nicht mit jeden Browser möglich.

Realisiere dies also per PHP, da bist du auf der sicheren Seite.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück