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

Revision: 68200

at December 10, 2014 19:00 by ulfinger

Updated Code

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

Revision: 68199

at December 10, 2014 18:58 by ulfinger

Updated Code

<?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(){
		$('#fachart').autocomplete({
			source: 'beruf.php',
			minLength: 2
		});
	});
</script>
?>

Revision: 68198

at December 10, 2014 18:56 by ulfinger

Updated Code

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

Revision: 68197

at December 10, 2014 18:49 by ulfinger

Updated Code

<?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 ****/

?>

Revision: 68196

at December 10, 2014 18:41 by ulfinger

Updated Code

<?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);
while ($data = mysqli_fetch_array($result)){
	$utfData = utf8_encode($data['name']);
	$liste[] = array("value" => $utfData);
}
echo json_encode ($liste);


?>

Revision: 68195

at December 10, 2014 18:34 by ulfinger

Initial Code

<?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());
}

?>

Initial URL

Initial Description

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

Initial Title

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

Initial Tags

javascript, sql, php, jquery

Initial Language

PHP

Choose a language for easy browsing: