Autocomplete Tutorial mit jQuery

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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

    Source Code

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


    Hier eine beispielhafte PHP Datei.

    Source Code

    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. ?>


    Source Code

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


    == Downloads ==

    54,608 times viewed