Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Getting jQuery autocomplete to work with JSON

Posted on 2013-01-30
8
Medium Priority
?
393 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 41

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 2000 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

597 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