Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 396
  • Last Modified:

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?
0
denewey
Asked:
denewey
  • 5
  • 2
1 Solution
 
Kyle AbrahamsSenior .Net DeveloperCommented:
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.
0
 
leakim971PluritechnicianCommented:
instead :
{"1":"ACCOUNT","3":"ACCOUNT_STATUS_REF","9627":"CMTS_Capacity.NSTy_Active_Accounts","9769":"CORE.Access_Levels","9327":"ACCOUNT_HOUSE","9329":"ACCOUNT_LAND_ADDR"}
return :
[{"id":1,"label":"ACCOUNT"},{"id":3, "label":"ACCOUNT_STATUS_REF"}, ...]
0
 
deneweyAuthor Commented:
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
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

0
 
deneweyAuthor Commented:
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?
0
 
deneweyAuthor Commented:
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.
0
 
deneweyAuthor Commented:
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.
0
 
deneweyAuthor Commented:
This was the actual solution which, if I had done it correctly in the first place, would have solved my problem right away.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now