asked on

Getting jQuery autocomplete to work with JSON

I have written an autocomplete script which works, in that it sends the term to the source file and a JSON string is returned, but autocomplete menu never appears to choose from. The short script I have is as follows:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<div class='ui-widget'>
<form>
<input type='text' id='search' name='search'>
</form>
</div>

<script type="text/javascript">

$('#search').autocomplete({
	appendTo: ".ui-widget",
  	source: 'suggestions.php',
	autoFocus: true, 
	delay: 0,
  	minLength: 3
});
</script>

Open in new window

And an example of what's returned (as seen from Firebug) is:

{"1":"ACCOUNT","3":"ACCOUNT_STATUS_REF","9627":"CMTS_Capacity.NSTy_Active_Accounts","9769":"CORE.Access_Levels","9327":"ACCOUNT_HOUSE","9329":"ACCOUNT_LAND_ADDR"}

Open in new window

After looking through a bunch of documentation I cannot find what to do with this returned string to make it display below the test input element to choose from.

Any clue?

Kyle Abrahams, PMP

It looks like you're returning the id as well as the name.

From here:
http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-source-json-does-not-contain-label-or-value-fields/

You should most likely implement the ajax call inside your source.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

denewey

ASKER

Ok, we're making progress. I got it to return:

["{\"id\":\"1\",\"label\":\"ACCOUNT\"}","{\"id\":\"3\",\"label\":\"ACCOUNT_STATUS_REF\"}","{\"id\":\"9627\",\"label\":\"CMTS_Capacity.NSTy_Active_Accounts\"}..."

which then displayed in a drop-down like this:

{"id":"1","label":"ACCOUNT"}
{"id":"3","label":"ACCOUNT_STATUS_REF"}
{"id":"9627","label":"CMTS_Capacity.NSTy_Active_Accounts"}
{"id":"10483","label":"IRIS_In.Account"}
...

I'm using the php function json_encode() which is returning that. This is the code that creates the return data:

$data = $stmt->fetchAll(\PDO::FETCH_ASSOC);
		foreach ($data as $row){
			$entities[] = json_encode(array('id' => $row['entity_id'], 'label' => $row['entity_name']));		
		}
		return $entities;

Open in new window

I've tried to format it differently, but I'm getting various odd results. At least I'm getting something to display, but how to get it correctly?

Thanks

leakim971

use json_encode only at the end

$data = $stmt->fetchAll(\PDO::FETCH_ASSOC);
		foreach ($data as $row){
			$entities[] = array('id' => $row['entity_id'], 'label' => $row['entity_name']);		
		}
		return json_encode($entities);

Open in new window

denewey

ASKER

Now I get a returned value of:

"[{\"label\":\"1\",\"value\":\"ACCOUNT\"}, {\"label\":\"3\",\"value\":\"ACCOUNT_STATUS_REF\"},{\"label\":\"9627\",\"value\":\"CMTS_Capacity.NSTy_Active_Accounts\"},..."

And I get the drop down displaying:

[
{
"
l
a
b
e
l
"
:
"
etc

(every character in the returned string)

It seems the key would be to get rid of the back slashes that are being added by the json_encode(). Do you know how to do that?

denewey

ASKER

I actually discovered that I was doing a json_encode() twice. When I removed that it came out correctly. However, I now get a drop-down displaying the names of the items I want the user to choose, but when an item is chosen the id is displayed in the text box instead of the name.

denewey

ASKER

Oops!! In trying to sort this out I had changed from

"id": 1, "label":"account"

to

"value": 1, "label": "account"

from something I saw somewhere else.

Once I switched it back to using "id", the drop-down worked correctly. I would say you know your stuff.

denewey

ASKER

This was the actual solution which, if I had done it correctly in the first place, would have solved my problem right away.