AJAX Autocomplete: Vorschläge direkt im Skript

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • AJAX Autocomplete: Vorschläge direkt im Skript

    Hallo zusammen

    Ich bin daran mit ein etwas aussergewöhnliches Autoskript zu basteln. Als Vorschlag soll nur 1 festgelegter Wert angezeigt werden. An den Wert komme ich aber nur auf der aktuellen Seite.

    Quellcode

    1. <script type="text/javascript">
    2. new Ajax.Autocompleter('email', 'auto1', 'emailnachschlagen.php', {});
    3. </script>


    Das heisst, dort wo der Link zur PHP Datei ist, würde ich gerne direkt meine Vorschläge reinschreiben.

    Ist das irgendwie realisierbar?

    Vielen Dank :)

    Gruss
    molex

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von molex ()

  • molex schrieb:

    Als Vorschlag soll nur 1 festgelegter Wert angezeigt werden.

    Mir ist leider noch nicht klar, was du vorhast? Du willst einen "festgeleten Vorschlag" anzeigen?
    Was hat das mit AutoComplete zu tun? Brauchst du überhaupt ein Eingabefeld?
    Du meinst "nur auf der aktuellen Seite" - brauchst du überhaupt AJAX?

    Was ist der Unterschied zum ganz normalen Textlink? ;)

    Lg

  • Also ein normaler Autocomplete erweitert um einen Default Vorschlag.

    Naja, dann liefere die Daten doch zusätzlich per GET Parameter mit, wenn sie Seiten bezogen sind - oder Frage sie aus der Session ab, wenn sie Userbezogen sind.

    Die Get Lösung:

    Quellcode

    1. new Ajax.Autocompleter('email', 'auto1', 'emailnachschlagen.php?default=test@test.test', {});


    Dein serverseitiges Script, musst du dann natürlich noch um den GET Parameter erweitern.

  • Hiho

    Irgendwie will das nicht ganz :S

    Die Seite auf der das AJAX Skript ausgeführt wird, heisst. index.php?id=1. Das Ajax Skript funktioniert nur, wenn ich anstatt index.php?id=1 "test.php" nehme und darin eine ganz normal Aufzählung mache.

    Dein serverseitiges Script, musst du dann natürlich noch um den GET Parameter erweitern.


    Was meinst du damit?

    Vielen Dank

  • Hey,


    würde es dir reichen, wenn du die Email fest in die Seite schreibst (angepast zum user)?

    Sprich:

    Quellcode

    1. <?php
    2. print "<html>dein ganzer htmlschrott";
    3. print "<script ...javascript>";
    4. print "var email = '" . $current_user_email . "'";
    5. ?>


    Und mit onkeyup="deinefunktion()" kannst du dann bei dem Textfeld eine Funktion aufrufen, die den ersten Buchstaben mit deiner variable email in JS vergleicht. Komplett ohne AJAX und somit weitaus schneller (die email vom user ändert sich ja nicht einfach so...)


    Gruß,
    Nick
    My lovely mister singing club...

  • Hiho zusammen

    Konnte es schlussendlich so lösen:

    Quellcode

    1. <script src="{@RELATIVE_WCF_DIR}js/scriptaculous/prototype.js" type="text/javascript"></script>
    2. <script src="{@RELATIVE_WCF_DIR}js/scriptaculous/scriptaculous.js" type="text/javascript"></script>

    Quellcode

    1. <style type="text/css">
    2. div.autocomplete {
    3. border:1px solid #888;
    4. margin:0;
    5. padding:0;
    6. font-size: 0.85em;
    7. }
    8. div.autocomplete ul {
    9. list-style-type:none;
    10. margin:0;
    11. padding:0;
    12. }
    13. div.autocomplete ul li.selected {
    14. background-color: #ffd;
    15. }
    16. div.autocomplete ul li {
    17. list-style-type:none;
    18. margin:0;
    19. padding:2px;
    20. cursor:pointer;
    21. }
    22. </style>
    Alles anzeigen


    Quellcode

    1. <script type="text/javascript">
    2. //<![CDATA[
    3. var destination = ['test@test.test',];
    4. new Autocompleter.Local('email','destination',destination, {
    5. frequency: 0.1,
    6. indicator: "loadingImg"
    7. });
    8. //]]>
    9. </script>


    Nun habe ich nur noch 1 Darstellungsproblem. Das Div das mir ja als Auswahl unterhalb des input Feldes angezeigt wird, ist ca. 4px länger als das Input Feldes. Anbei ein Bild:

    Ich habe es mit allen möglichen CSS Befehlen versucht, aber schlussendlich wirkte nix.

    Ich weiss es ist nur eine Kleinigkeit, aber mir springt es irgendwie sofort ins Auge.

    Ansonsten, vielen Dank für die Hilfe :)
    Bilder

    • ajax.png

      1,05 kB, 770×56, 348 mal angesehen

  • Hiho

    Ich sah gerade, dass er mir aus meinem div, in welchem er dann den Vorschlag anzeigt im Browser folgendes macht:

    Quellcode

    1. <div id="destination" class="autocomplete" style="width: 756px; position: absolute; left: 356px; top: 439px; display: none;">
    2. </div>


    Ich denke der Auslöser werden die 756px bei der Länge sein. Ich habe keine Ahnung woher er dieses CSS zieht. Im Editor sieht das div so aus:

    Quellcode

    1. <div id="destination" class="autocomplete"></div>


    Irgendwie schräg :D

    Die Seite findet ihr hier:

    asperger-forum.ch/forum/index.php?form=Contact

    Ich habe dem E-Mail Feld als Vorschlag die Adresse: test@test.test hinterlegt.

    Viele Dank

  • Ich schätze, das ist der AutoComplete in Protoculous, der die offset breite setzt, dabei aber nicht die border links und rechts berücksichtigt.
    Die Breite auf 100% setzen funktioniert leider auch nicht. Wenn du die Breite auf "auto" setzt, überschreibt das Framework diese Breite evtl nicht.

    Wenn du die 2px fixen willst, musst du das entweder im Protoculous Kern (nicht zu empfehlen), oder indem du eine Callback Methode schreibst, du die offset Breite im nachhinein korrigiert.

    Ich habe mir den minified Code des Protoculous nicht angeschaut. Aber ich schätze der Aufwand lohnt sich nicht.