Solved

Getting jQuery autocomplete to work with JSON

Posted on 2013-01-30
8
376 Views
Last Modified: 2013-01-30
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
Comment
Question by:denewey
  • 5
  • 2
8 Comments
 
LVL 40

Expert Comment

by:Kyle Abrahams
ID: 38837001
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38837002
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
 

Author Comment

by:denewey
ID: 38837145
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38837239
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:denewey
ID: 38837263
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
 

Author Comment

by:denewey
ID: 38837301
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
 

Author Comment

by:denewey
ID: 38837315
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
 

Author Closing Comment

by:denewey
ID: 38837320
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now