Autocomplete: script.aculo.us

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

  • Autocomplete unterstützt den Benutzer bei der Sucheingabe indem es Vorschläge liefert. Hier wird es mit Hilfe des Frameworks script.aculo.us gebaut.
    == Was ist Autocomplete ==
    Die getippten Buchstaben des Suchwortes werden unmittelbar im Hintergrund zum Server übertragen, das jeweilige Ergebnis zurückgeschickt und "live" in die bestehende Seite eingefügt. Dieser Vorgang wiederholt sich bei jedem getippten Buchstaben. Der Service wurde besonders populär nachdem Google ihn lange in der Beta Phase hatte und inzwischen auf google.com produktiv einsetzt:
    easy-coding.de/Attachment/516/…fb84661776a00c5c5f2aa9bac

    == Was ist script.aculo.us ==
    script.aculo.us ist eine JavaScript-Bibliothek, die auf dem JavaScript-Framework Prototype aufbaut. Sie bietet dynamische visuelle Effekte und GUI-Elemente über das Document Object Model (DOM).
    Warum sollte man script.aculo.us den vielen anderen JavaScript Frameworks vorziehen? Das soll an dieser Stelle nicht diskutiert werden. Ich werde den Autocomplete Effekt mit mehreren Frameworks erklären.

    Links:


    == Ladegrafik ==
    Als Vorbereitung müsst ihr euch eine Grafik beschaffen. Ihr könnt die Grafik entweder mit GIMP, Photoshop & Co selbst erstellen oder aber den kostenlosen Webservice von ajaxload.info nutzen. Ihr braucht für dieses Tutorial keine Kenntnisse aus dem HowTo [wiki]AJAX Ladegrafik[/wiki], da script.aculo.us seine eigenen Helperfunktionen mitbringt um die Funktionalität einer Ladegrafik zu erzeugen.

    == Code ==
    === Frontend ===
    script.aculo.us ist wie viele andere JavaScript Frameworks sehr "ID-bezogen". Ihr werdet feststellen, dass ihr die IDs der Container an anderen Stellen im JavaScript Code angebt.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <title>Autocomplete: script.aculo.us</title>
    6. <script src="js/prototype.js" type="text/javascript"></script>
    7. <script src="js/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
    8. <link rel="stylesheet" type="text/css" href="style.css" />
    9. </head>
    10. <body>
    11. <h2>Autocomplete: script.aculo.us</h2>
    13. <form action="" method="post">
    14. <div>
    15. Suchen nach:
    16. <input id="sourceInput" type="text" name="sourceInput" />
    17. <img src="img/ajaxload.gif" alt="" id="loadingImg" />
    18. <div id="destinationDiv" class="autocomplete"></div>
    20. <input type="submit" value="Speichern" />
    21. </div>
    22. </form>
    24. <script type="text/javascript">//<![CDATA[
    25. new Ajax.Autocompleter('sourceInput','destinationDiv','search.php', {
    26. indicator: 'loadingImg'
    27. });
    28. //]]></script>
    29. </body>
    30. </html>
    Alles anzeigen


    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. });



    === Backend ===
    Das Backend muss einen normalen HTML Code ausgeben. am besten ist eine Darstellungsvariante unterhalb des Eingabeelements. Außerdem kann man die Liste scrollbar machen. Das erreicht man durch die Angabe einer festen Größe und der Eigenschaft overflow:auto.

    Wenn ihr Hilfe zum Umgang mit dem PDO braucht, könnt ihr das im entsprechenden Tutorial nachlesen: [wiki]Einführung in PDO[/wiki] - generell könnt ihr aber auch jede andere Datenbankschnittstelle dazu benutzen.

    Quellcode

    1. <?php
    2. require_once 'Configuration.php';
    3. require_once 'MyDB.php';
    5. $sql = "SELECT username,
    6. job
    7. FROM user
    8. WHERE username LIKE :username
    9. LIMIT 10";
    10. $stmt = MyDB::getInstance()->prepare($sql);
    11. $stmt->execute(array(
    12. ':username' => "%".$_REQUEST['sourceInput']."%",
    13. ));
    14. $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
    16. echo '<ul style="overflow:auto;height:150px">';
    17. foreach($result as $row) {
    18. printf('<li><b>%s</b> %s</li>', $row['username'], $row['job']);
    19. }
    20. echo '</ul>';
    21. ?>
    Alles anzeigen


    == Demo ==
    Ihr könnt den zusammengesetzten Code hier live ausprobieren: demo.easy-coding.de/ajax/autocomplete-script.aculo.us/. Außerdem gibt es alle Dateien zum kostenlosen Download%
    Bilder

    • google-suggest.png

      13,56 kB, 579×343, 1.400 mal angesehen

    18.321 mal gelesen