Advanced Search

jQuery UI input autocomplete mit Datenbank

/ Published in: jQuery
Save to your folder(s)
Mit dem php-Script innerhalb der Seite wird aus der SQL-Datenbank ein Javascript-Array zusammengestellt. Darauf greift das autocomplete-Widget zu.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <?php
  4. // Verbindung zur Datenbank herstellen
  5. $db_server    = "localhost";
  6. $db_user      = "db12345-user";
  7. $db_passwort  = "geheimnis";
  8. $db_name      = "db12345-db";
  9. $db = @ mysql_connect($db_server, $db_user, $db_passwort)
  10. or die ( 'Konnte keine Verbindung zur Datenbank herstellen' );
  11. $db_select = @ mysql_select_db($db_name );
  12.  
  13. // Einträge aus Datenbank abrufen
  14. $autoFrage = "SELECT  tblObject_1.input_name FROM tblObject_1";
  15. $autoResult = mysql_query($autoFrage);
  16. while($autoDaten = mysql_fetch_object($autoResult)){
  17.     $autoString .= '"'.$autoDaten->input_name.'",';
  18. }
  19. ?>
  20. <script type="text/javascript">
  21.   $(function() {
  22.     var availableTags = [<?php echo $autoString; ?>];
  23.     $( "#tags" ).autocomplete({
  24.       source: availableTags
  25.     });
  26.   });
  27. </script>
  28. <style type="text/css">
  29.   /* Formatierung der Ergebnisse: *>
  30.  
  31.   /* Die Statuszeile von jQuery UI autocomplete wird ausgeblendet: */
  32.   .ui-helper-hidden-accessible {display: none;}
  33. </style>
  34. </head>
  35. <body>
  36.   <form>
  37.     <input type="text" id="tags" name="eingabe"/>
  38.   </form>
  39. </body>
  40. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.