Autocomplete Tutorial mit jQuery

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

  • Beim Autocomplete werden Eingaben innerhalb eines Eingabefeldes automatisch durch Suchtreffer ergänzt.
    jQuery ist ein kompakte JavaScript Library, die zwar im Vergleich zu Scriptaculous nicht so viele Effekte mitbringt, dafür aber auch nur einen Bruchteil des Quellcodes erfordert.
    Die Besucher werden also mit schnelleren Ladezeiten belohnt.

    Die erforderlichen JavaScript Dateien beziehen sie am Besten über die Homepage des Projektes oder über die Links weiter unten.

    Die Suchanfrage wird in unserem Beispiel mit dem Parameter "q" an die Datei suche.php geschickt.
    Die Ausgabe der suche.php hat folgendermaßen auszusehen

    Quellcode

    1. suchwort|zusatzinfos
    2. suchwort|zusatzinfos
    3. ...


    Hier eine beispielhafte PHP Datei.

    Quellcode

    1. <?php
    2. $res = mysql_query("SELECT * FROM table WHERE spalte LIKE '%".$_GET['q']."%' ");
    3. while($row=mysql_fetch_object($res)) {
    4. echo $row->spalte.'|'.$row->spalte2."\n";
    5. }
    6. ?>


    Quellcode

    1. <html>
    2. <head><title>AutoComplete mit jQuery</title>
    4. <script type="text/javascript" src="jquery.js"></script>
    5. <script type="text/javascript" src="jquery.autocomplete.js"></script>
    7. <style type="text/css">
    8. .ac_input {
    9. width: 200px;
    10. }
    11. .ac_results {
    12. width: 200px;
    13. background: #eee;
    14. cursor: pointer;
    15. position: absolute;
    16. left: 0;
    17. font-size: 90%;
    18. z-index: 101;
    19. }
    20. .ac_results ul {
    21. width: 200px;
    22. list-style: none;
    23. padding: 0px;
    24. margin: 0px;
    25. border: 1px solid #000;
    26. }
    27. .ac_results li {
    28. width: 190px;
    29. padding: 2px 5px;
    30. }
    31. .ac_results a {
    32. width: 100%;
    33. }
    34. /* thanks udoline: this fixed position error into msie */
    35. .ac_results iframe {
    36. width: 200px;
    37. position: absolute;
    38. }
    39. .ac_loading {
    40. background : url('/indicator.gif') right center no-repeat;
    41. }
    42. .over {
    43. background: yellow;
    44. }
    45. </style></head>
    47. <body>
    49. <p><input id="autocomplete" type='text'></p>
    51. <script type="text/javascript">
    52. function selectItem(li) {
    53. return false;
    54. }
    55. function formatItem(row) {
    56. return row[0] + "<br><i>" + row[1] + "</i>";
    57. }
    58. $(document).ready(function() {
    59. $("#autocomplete").autocomplete("search.php", {
    60. minChars:3,
    61. matchSubset:1,
    62. matchContains:1,
    63. cacheLength:10,
    64. onItemSelect:selectItem,
    65. formatItem:formatItem,
    66. selectOnly:1
    67. });
    68. });
    69. </script>
    70. </div>
    71. </body>
    72. </html>
    Alles anzeigen


    == Downloads ==

    53.867 mal gelesen