Solved

Getting jQuery autocomplete to work with JSON

Posted on 2013-01-30
8
381 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
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!

 
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
 

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Review of the nodejs code 1 35
Javascript Regex 7 20
null, truthy, falsey confusion 25 28
Add somewhat of a wildcard to your javascript 12 30
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

679 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