PHP result to JSON - jqueryui autocomplete


I am not sure if this should be in the javascript or PHP forum so please move if not in the correct forum.

I am having problems with getting auto complete to work with data from a PHP file/mysql query.

Here is the HTML.

<?php include ('test_connect.php'); ?>
<?php include ('test_query.php'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Auto Complete from PHP to JSON</title>
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css"/>
<link type="text/css" href="css/redmond/jquery.ui.autocomplete.css"/>
<script type="text/javascript" src="jscripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="jscripts/jquery-ui-1.8.5.custom.js"></script>
	$(function() {
		$( "#auto" ).autocomplete({
			source: "test_query.php"

    <input id="auto"/>

Here is the PHP that puts the mysql result to JSON.


$return_arr = array();

//create select query

$query = "SELECT name_name
		FROM name";

// Run the query
$result = mysqli_query ($dbc, $query);

	echo "Query Complete".'<br>';

$array = array();

while($obj = mysqli_fetch_array($result, MYSQLI_ASSOC)){
	$array['name'] = $obj['name_name'];

$json = json_encode($return_arr);

echo $json;

The output that I get is:


This looks correct to me but still the auto complete does not work.

It would be great if anyone had any suggestions or help.


It’s mainly a jquery question but basically your json output needs to look something like:

Google for jquery autocomplete php to see some examples.

And if you not already, consider using firebug to monitor your ajax requests.

I found the problem.

I took your suggestion and used firebug to track the javascript.
My connection script was printing “Connected” when a connection was made to the database. This was going before the array in the string that was being passed to the javascript.

Removed this “connected” and worked perfect.

thanks for your help.