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?
LVL 3
Tim PalmerLevel 3 Support TechnicianAsked:
Who is Participating?
 
Tim PalmerConnect With a Mentor Level 3 Support TechnicianAuthor 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 Support TechnicianAuthor 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 Support TechnicianAuthor Commented:
Also, an example of the response from addressify.com.au is

["STRATFORD","STRATHCEDAR","STRATHEDEN","STRATHFIELD","STRATHFIELD SOUTH"]
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
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
 
Tim PalmerLevel 3 Support TechnicianAuthor 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 Support TechnicianAuthor Commented:
Simplified the code myself and it worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.