✔ [JQuery] Ui Autocomplete - Leere Ergebnisliste

[supercat1510]

Ich hab versucht Jquery Autocomplete einzubauen, wenn ich die PHP-Datei aufrufe funktioniert alles, und wenn ich das Script in seinem eingebauten Zustand aufrufe und beginne den suchbegriff zu schreiben sieht man, dass das script funktioniert (Firebug). <li></li> wird erstellt in der Anzahl wie häufig das Suchergebnis vorkommt, aber nichts angezeigt.

jQuery-Funktion:

$(function(){
	$("#user_name").autocomplete({
		source: "inc/autocomplete.inc.php",
		minLength: 2,
		select: function(event, ui) {
			$('#user_id').val(ui.item.user_id);
			$('#user_name').val(ui.item.user_name);
		}
	});
});

HTML-Datei:

<form action="index.php?link=ag_news&amp;job={$n_job}&amp;id={$n_id}" method="post" id="formgbook1">
<input type="hidden" name="absenden" value="ja" />
<table border="0" cellspacing="0" cellpadding="6">
	<tr>
		<td><label for="name">Name</label></td>
		<td><input type="text" name="name" id="name" value="{$n_name}" /></td>
	</tr>
	<tr>
		<td><label for="newskat_name">Kategorie</label></td>
		<td><input type="text" name="newskat_name" id="newskat_name" value="{$n_newskat_name}" />{$n_newskat_change}</td>
	</tr>
	<tr>
		<td><label for="user_name">User</label></td>
		<td><p class="ui-widget"><input type="text" name="user_name" id="user_name" value="{$n_user_name}" /><input type="hidden" id="user_id" name="user_id" /></p></td>
	</tr>
	<tr>
		<td><label for="quelle">Quelle</label></td>
		<td><input type="text" name="quelle" id="quelle" value="{$n_quelle}" /></td>
	</tr>
	<tr>
		<td><label for="quelle_link">Quelle Link</label></td>
		<td><input type="text" name="quelle_link" id="quelle_link" value="{$n_quelle_link}" /></td>
	</tr>
	<tr>
		<td><label for="text">Nachricht</label></td>
		<td><textarea rows="6" cols="20" name="text" id="text" class="gbooktextarea">{$n_text}</textarea></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td><input type="submit" value="{$n_submit}" /></td>
	</tr>
</table>
</form>
{php}
if (isset($_POST['submit'])) {
echo "<p>";
	while (list($user_id,$user_name	) = each($_POST)){
	echo "<strong>" . $user_id . "</strong> = ".$user_name."<br />";
	}
echo "</p>";
}
{/php}

autocomplete.inc.php:

$return_arr = array();

$dbhost = 'localhost';
$dbuser = 'ccccc';
$dbpass = 'ccccc';
$dbname = 'ccccc';

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);

/* If connection to database, run sql statement. */
if ($conn){
	$fetch = mysql_query("SELECT * FROM ag_user where name like '%".$_GET['term']."%'");

	/* Retrieve and store in array the results of the query.*/

	while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)){
		$row_array['user_id'] = $row['user_id'];
		$row_array['user_name'] = $row['name'];

        array_push($return_arr,$row_array);
    }

}

/* Free connection resources. */
mysql_close($conn);

/* Toss back results as json encoded array. */
echo json_encode($return_arr);

 

[CPoly]

Deine Antwort sieht etwa so aus:

[{"user_id":"17","user_name":"Alex"},{"user_id":"13","user_name":"Peter"}]

Die Dokumentation sieht entweder eine String-Array vor

["Alex", "Peter"]

Oder ein Objekt-Array mit den Attributen "label" und "value".

[{"value":"13","label":"Alex"},{"value":"13","label":"Alex"}

Also musst du nur die zwei Zeilen im PHP code ändern.

$row_array['value'] = $row['user_id'];
$row_array['label'] = $row['name'];

Das JQuery Plugin kann ja schlecht auf magische weise feststellen, was es anzeigen soll. Wenn du mehr Kontrolle über die Darstellung willst musst du als "source" eine Funktion übergeben.

 

[supercat1510]

Danke - das klappt.

Im Orginal stand das auch so - aber wusste nicht das die gleich lauten müssen.