jQuery UI autocomplete mit JSON und externer php-Seite als Quelle


/ Published in: PHP
Save to your folder(s)

Bei Autocomplete aus größeren Datenbanken ist es sinnvoll, die Datenbankabfrage in eine separate php-Datei zu verlegen.


Copy this code and paste it in your HTML
  1. <?php
  2. /**** php-Datei mit Datenbankabfrage ****/
  3.  
  4. /* Verbindung zur Datenbank */
  5. $db_server = "localhost";
  6. $db_user = "db12345-user";
  7. $db_passwort = "Geheimnis";
  8. $db_name = "db12345-name";
  9. $dblink = mysqli_connect($db_server, $db_user, $db_passwort, $db_name);
  10. if(!$dblink){
  11. die('Connect Error ('.mysqli_connect_errno().')'.mysqli_connect_error());
  12. }
  13.  
  14. /* Die vom Autocomplete Widget ���bergebene Request-Variable heist immer 'term', egal wie das Eingabefeld benannt ist. /*
  15. $term = trim($_GET['term']);
  16.  
  17. /* SQL-Abfrage */
  18. $query = "SELECT name FROM tabelle1 WHERE name LIKE '%".$term."%' ORDER BY name";
  19. $result = mysqli_query($dblink, $query);
  20.  
  21. /* Aus den Ergebnissen wird ein Array zusammenfgestellt. Wichtig ist, dass die Ergebisse utf8-codiert sind, weil JSON das erfordert */
  22. while ($data = mysqli_fetch_array($result)){
  23. $utfData = utf8_encode($data['name']);
  24. $liste[] = array("value" => $utfData);
  25. }
  26.  
  27. /* Das Array wird im JSON-Format ausgegeben. */
  28. echo json_encode ($liste);
  29.  
  30. /* Die JSON-Ausgabe muss dann so aussehen:
  31. [{"value":"Ergebnis1"},{"value":"Ergebnis2"}, ... ]
  32. */
  33.  
  34. /**** Inputfeld mit Autocomplete - Das Feld muss eine eindeutige ID haben ****/
  35. <form action="" method="post">
  36. <input type="text" name="name" id="autofeld"/>
  37. </form>
  38.  
  39. /**** Javascript ****/
  40. <script type="text/javascript">
  41. $(document).ready(function(){
  42. $('#autofeld').autocomplete({ // ID des Inputfeldes
  43. source: 'name.php', // Dateiname der externen php-Datei
  44. minLength: 2 // Suche wird nach Eingabe von mindestens zwei Zeichen gestartet
  45. });
  46. });
  47. </script>
  48. ?>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.