Advanced Search

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.

Expand | Embed | Plain Text

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.