Prototype - Autocompleter

  • Prototype - Autocompleter

    Hallo. So hab mich heute Nacht mal wieder in was neues Eingearbeitet. Was ja eigentlich ganz Simpel ist.
    Hab auch den Wikieintrag hier aus dem Coder zu dem Autocompleter gefunden.

    Aber mein Problem ist, ich würde mir gerne die response, also das was zurückgegeben wird in einer select Box ausgeben lassen. Hat damit jemand erfahrung gemacht?
    Ich hab bei google keine einzige Lösung gefunden. Alle Themen die bereits so ein Thema behandelten verliefen im Sande oder ohne Lösung. Viele haben dann das Framework gewechselt. Ist aber bei mir nicht mehr wirklich machbar.

    Also ich habe den Autocompleter:

    Quellcode

    1. <input type="text" id="input" name="input"/>
    2. <div id="response" style="display:none;position:relative;"></div>
    4. <script type="text/javascript">
    5. new Ajax.Autocompleter('input','response','result.php');
    6. </script>


    Und die result.php liefter dann die MySQL abfrage mit dem POST request:

    Quellcode

    1. <?php
    2. echo '<select>';
    4. //sqlabfrage
    5. //while schleife anfang
    6. echo '<option>'.$res_p['artikel'].'</option>';
    7. //while schleife ende
    8. echo '</select>';
    9. ?>


    Funktionierten tut das ganze eigentlich auch. Nur sobald ich dann die Selectbox aufklappe, schließt sie sich direkt wieder.

    Oder wenn ich der selectbox eine größe zuordner also size="10" oder so. Und dann ein Ergebnis auswähe, schließt sich die Selectbox wieder. Also sie wird ausgeblendet.
    Wie kann ich machen, dass sie nicht direkt ausgeblendet wird sobald ich darauf klicke?

    Bin dankbar für jede Hilfe. Hoffe hier kennt sich jemand mit Prototype aus. :S

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

  • was willst du eigentlich erreichen? Mit overflow:auto & Co kannst du schon erreichen, dass sich das ganze verhält wie eine Selectbox. Warum also wirklich eine bauen?
    Die Liste ist ja nur ein "Helper" um das eigentliche Input Element zu befüllen.

    Hast du eine Demo, wo du das, was du haben willst, schonmal gesehen hast?

    PS: Frisch getippt: [wiki]Autocomplete: script.aculo.us[/wiki]

  • Achsoo. Oh man dann wollte ich die Funktion total zweckentfremden. Klar das es nicht funktionieren kann.

    Damit bezwecken wollte ich, dass ich in einer Selectbox die User angezeigt bekomme, die der Inputeingabe ähneln. Dem <option> kann man ja eine Id zuweisen. Diese ID brauche ich, weil das ganze weiter in einem Formular verarbeitet werden soll.

    Ähm ja gesehen habe ich das ganze schonmal bei Studivz.
    Wenn du eine Person verlinken willst, bekommst du ja eine Auswahlliste und oben ist ein Inputfeld. Tippst du dort buchstaben ein, holt ein Script aus der Datenbank die User die der Textfeldeingabe ähneln.


    Ich hab mir jetzt sowas selber geschrieben mittels Prototype und dem Form.request.
    Einzige Frage die ich mir dabei stelle ist, was passiert wenn ein Request mal was länger brauch um sich zu "beenden" also bis es erfolgreich ausgeführt wurde?
    Also ich Starte die funktion via onkeyup. Bei jedem betätigen einer Taste wird das Request gestartet. Nachher starten sich 10 request weil man schnell Tippt, und überlasten den Server total.

    Und die andere Frage, kann man den EventHandler onkeyup so umfunktionieren, dass er nur Startet wenn es sich um eingaben handelt? Also a-zA-z0-1 und sonderzeichen?


    Und dankeschön für den neuen Eintrag im Coder-Wiki

  • Ich habe den Wiki Artikel ergänzt:

    Um die Serverlast zu verringern bietet script.aculo.us zwei Parameter. Der Parameter frequency gibt die Zeitspanne in Sekunden an die mindestens zwischen zwei AJAX Anfragen vergehen muss. minChars kann man erhöhen um zu erreichen, dass die AJAX Anfragen erst ab einer bestimmten Mindest-Zeichenlänge gesendet werden.

    Die Parameter ändert man beim konstruieren des Autocompleters - die Standardwerte sind 0.4 und 1.

    Quellcode

    1. new Ajax.Autocompleter('sourceInput','destinationDiv','search.php', {
    2. indicator: 'loadingImg',
    3. frequency: 0.4,
    4. minChars: 1
    5. });