jqueryui自动完成mit JSON und externer php Seite als Quelle

Posted 2021-02-23

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

<?php
/**** php-Datei mit Datenbankabfrage ****/
 
/* Verbindung zur Datenbank */
$db_server    = "localhost";
$db_user      = "db12345-user";
$db_passwort  = "Geheimnis";
$db_name      = "db12345-name";
$dblink       = mysqli_connect($db_server, $db_user, $db_passwort, $db_name);
if(!$dblink){
	die('Connect Error ('.mysqli_connect_errno().')'.mysqli_connect_error());
}
 
/* Die vom Autocomplete Widget ���bergebene Request-Variable heist immer 'term', egal wie das Eingabefeld benannt ist. /*
$term = trim($_GET['term']);
 
/* SQL-Abfrage */
$query = "SELECT name FROM tabelle1 WHERE name LIKE '%".$term."%' ORDER BY name";
$result = mysqli_query($dblink, $query);
 
/* Aus den Ergebnissen wird ein Array zusammenfgestellt. Wichtig ist, dass die Ergebisse utf8-codiert sind, weil JSON das erfordert */
while ($data = mysqli_fetch_array($result)){
	$utfData = utf8_encode($data['name']);
	$liste[] = array("value" => $utfData);
}
 
/* Das Array wird im JSON-Format ausgegeben. */
echo json_encode ($liste);
 
/* Die JSON-Ausgabe muss dann so aussehen:
[{"value":"Ergebnis1"},{"value":"Ergebnis2"}, ... ]
*/
 
/**** Inputfeld mit Autocomplete - Das Feld muss eine eindeutige ID haben ****/
<form action="" method="post">
    <input type="text" name="name" id="autofeld"/>
</form>
 
/**** javascript ****/
<script type="text/javascript">
	$(document).ready(function(){
		$('#autofeld').autocomplete({ // ID des Inputfeldes
			source: 'name.php', // Dateiname der externen php-Datei
			minLength: 2 // Suche wird nach Eingabe von mindestens zwei Zeichen gestartet
		});
	});
</script>
?>