• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 698
  • Last Modified:

jQuery, AJAX and JSON (oh my!)

Hi experts,

I am trying to understand and adapt the example code provided in the autocomplete documentation

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
#city { width: 25em; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
data: {
q: request.term
},
[b]success: function( data ) {
response( data );[/b]
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>

Open in new window


I'm trying to convert it to use another API which appears to work successfully, but won't display the results.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
#city { width: 25em; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://api.addressify.com.au/address/suburbAutoComplete",
dataType: "json",
data: {
term: request.term,
api_key: "{removed}"
},
success: function( data ) {
response( data );
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>

Open in new window



I just don't see what I'm doing wrong.
The API call works because I have the ability of checking how many API calls left and that changes with each keystroke.

Any advice?
0
Tim Palmer
Asked:
Tim Palmer
  • 5
1 Solution
 
Tim PalmerLevel 3 Escalation TechAuthor Commented:
I should also add, the documentation about the API I am using is found here
http://www.addressify.com.au/documentation.html
0
 
Tim PalmerLevel 3 Escalation TechAuthor Commented:
Also, an example of the response from addressify.com.au is

["STRATFORD","STRATHCEDAR","STRATHEDEN","STRATHFIELD","STRATHFIELD SOUTH"]
0
 
Albert Van HalenAnalyst developerCommented:
The request is probably from another domain which is prohibited.
You should use jsonp instead of json as the dataType.
0
Industry Leaders: 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!

 
Tim PalmerLevel 3 Escalation TechAuthor Commented:
I tried jsonp too with no luck.

Using just Ajax and not jquery I can populate a select box using http_get_contents but I'd like to make it "pretty"

This code works for me, but not using AJAX/jQuery, this is a manual AJAX call that most of my AJAX calls use (jQuery is still foreign to me so I prefer going the ways I know)

$term = $_GET['term'];
$temp = array("api_key"=>"{removed}","term"=>$term, "state"=>"nsw","max_results"=>5);
$query = http_build_query($temp);
$list = file_get_contents("http://api.addressify.com.au/address/suburbAutoComplete?$query");
echo $list;

Open in new window

0
 
Tim PalmerLevel 3 Escalation TechAuthor Commented:
OK! I got it!

I had to modify my autocomplete, but it looks like "term" is passed automatically to my getSuburb.php (posted above) and thats done the trick!

$(function() {

$( "#city" ).autocomplete({
source: "getSuburb.php",
minLength: 3

})
});

Open in new window

0
 
Tim PalmerLevel 3 Escalation TechAuthor Commented:
Simplified the code myself and it worked.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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