✔ [ jQuery UI ] Problem mit Autocomplete

[pyr0t0n]

Guten Abend liebe Tutorials.de Gemeinde,

ich habe ein kleines Problem mit dem jQuery UI Autocomplete Feature. Zu meinem Problem, ich habe ein Textfeld in das wahlweise PLZ oder Ort eingegeben werden sollen und dann via AJAX die Suchergebnisse von einem PHP Script bereitgestellt werden sollen.

Im grunde ganz wie in diesem Tutorial http://jqueryui.com/demos/autocomplete/#remote

Die Daten die beim Tutorial von der search.php zurück kommen, scheinen im JSON Format aufbereitet zu sein nämlich diese bei eingabe von "Eu"

[ { "id": "Caprimulgus europaeus", "label": "European Nightjar", "value": "European Nightjar" }, { "id": "Upupa epops", "label": "Eurasian Hoopoe", "value": "Eurasian Hoopoe" }, { "id": "Jynx torquilla", "label": "Eurasian Wryneck", "value": "Eurasian Wryneck" }, { "id": "Picus viridis", "label": "European Green Woodpecker", "value": "European Green Woodpecker" }, { "id": "Saxicola rubicola", "label": "European Stonechat", "value": "European Stonechat" }, { "id": "Ficedula hypoleuca", "label": "Eurasian Pied Flycatcher", "value": "Eurasian Pied Flycatcher" }, { "id": "Sitta europaea", "label": "Eurasian Nuthatch", "value": "Eurasian Nuthatch" }, { "id": "Falco subbuteo", "label": "Eurasian Hobby", "value": "Eurasian Hobby" }, { "id": "Pica pica", "label": "Eurasian Magpie", "value": "Eurasian Magpie" }, { "id": "Garrulus glandarius", "label": "Eurasian Jay", "value": "Eurasian Jay" }, { "id": "Pluvialis apricaria", "label": "European Golden Plover", "value": "European Golden Plover" }, { "id": "Pyrrhula pyrrhula", "label": "Eurasian Bullfinch", "value": "Eurasian Bullfinch" } ]

Mein Script sieht folgendermaßen aus:

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script src="jquery-1.6.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.autocomplete.js"></script>


<script>
	$(function() {
		$( "#citys" ).autocomplete({
			source: "getTeilnehmer.php",
			minLength: 2,
		});
	});
</script>



<div class="test">

<div class="ui-widget">
	<label for="citys">Stadt: </label>
	<input id="citys" />
</div>
</div>

und die Rückgabe dieser im Script angegebenen "getTeilnehmer.php" auf eine Suchanfrage mit eingabe von "45" ist folgende:

[ { "id": "2", "label": "45701 Herten", "value": "45701" }, { "id": "3", "label": "12345 Testort", "value": "12345" }, ]

Nur es funktioniert nicht, es geht einfach kein Widget von der jQuery UI auf. Gebe ich direkt als source ein Array an funktionierts, kann also nicht an JS an sich liegen, sondern anscheinend mit der Rückgabe.

Ich hoffe ihr könnt mir Helfen.

Danke schonmal.

Beste Grüße
pyr0t0n

 

[ComFreek]

Hallo pyr0t0n,

ich habe es gerade ausprobiert, das Problem ist das "unnötige" Komma am Ende beim JSON.

Also liegt das Problem an deinem PHP-Skript. Am besten du postest mal dessen Inhalt.

 

[pyr0t0n]

Hallo ComFreek,

super danke, habe das PHP Script angepasst, funktioniert nun auch bei mir. Vielen dank habs einfach nicht geblickt.

Für diejenigen die es dann noch interessiert, mache das nun so:

if(!empty($_GET['term']))
	{
		$sql = "SELECT * FROM teilnehmer WHERE plz LIKE '%".$_GET['term']."%'";
		$res = $db->query($sql);
		$string = "";
		$string .= "[ ";
		while($line = $db->fetch_array_single($res))
		{
			$string .= '{ "id": "'.$line['id'].'", "label": "'.$line['plz'].' '.$line['ort'].'", "value": "'.$line['plz'].'" }, ';
		}
		$string = substr($string, 0, strlen($string) - 2);
		$string .= "]";
		echo $string;

 

[ComFreek]

Übrigens gibt es die Funktion [phpf]json_encode[/phpf], die dir jedes Array zu JSON umwandelt. Dann brauchst du nicht das JSON selber mit Strings generieren, sondern löst es viel eleganter:

if(!empty($_GET['term']))
    {
        $sql = "SELECT * FROM teilnehmer WHERE plz LIKE '%". mysql_real_escape_string($_GET['term'])."%'";
        $res = $db->query($sql);

        $data = array();

        while($line = $db->fetch_array_single($res))
        {
           $data[] = array('id' => $line['id'],
                           'label' => $line['plz'] . ' ' . $line['ort'],
                           'value' => $line['plz']);
        }
        echo json_encode($data);

Ist doch viel weniger Code und sauberer, oder?

Außerdem ist dein Code für SQL Injections ungeschützt ausgeliefert! Man könnte $_GET['term'] so verändern, dass anderer SQL-Code ausgeführt wird (v.a. DROP).
Deshalb sollte man immer die Funktion mysql_real_escape_string benutzen (oder bei einem MySQLi-Objekt $db->real_escape_string($str);).

Das habe ich im Code oben auch eingefügt
Ich habe auch mal ein Tutorial darüber geschrieben, also wenn du mehr wissen willst: Sicherheit in PHP-Codes schaffen.

 

[pyr0t0n]

Das mit dem SQL Injections weis ich, das oben war lediglich ein kleiner Testcode, lokal. Die json_encode funktion kannte ich jedoch nicht, werde diese doch direkt mal ausprobieren. Deinen Artikel werde ich dennoch mal lesen, man lernt ja nie aus.

Vielen dank nochmal.