Here is one that's been driving us a little insane. We implemented the example script for JSONP from the jQuery UI page http://jqueryui.com/autocomplete/#remote-jsonp then right in place next to it, we wrote a minimally modified version.
Here's the kicker. The script from jQuery ui works in IE and ours only works in Firefox, Chrome, etc
The ONLY difference is our datasource.
It there some magic thing we need to do to our data when we send it to the client? We've tried wrapping it in named functions, etc.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title></title>
<link rel="stylesheet" href="/css/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<script>
function foo (str) {
//console.log(str);
return str;
}
$(function() {
function log( message ) {
$( "#street1" ).val( message );
}
$( "#street1" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://192.168.50.78/melissa/address/linux/interfaces/php/api/autoAddrSuggest_new_dual2.php",
dataType: "json",
data: {
format: 'json',
action: 'address1request',
zipcode: '43026',
address: request.term
},
success: function( data ) {
console.log( data.addresses );
response( $.map( data.addresses, function( item ) {
return {
label: item.address,
value: item.address
};
}));
},
error: function(data) {
console.log(data);
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value :
"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" );
}
});
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
console.log( data.geonames );
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
};
}));
}
});
},
minLength: 2,
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>
<div id="wrap">
<div id="main">
<div>
<form id="enroll" name="enroll" method="post" enctype="multipart/form-data">
<div>
<p class="left">
<span> </span><br/>
<input id="street1" />
<input id="city" />
</p>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
For giggles, here is the output from the working json service
{"totalResultsCount":12958,"geonames":[{"countryName":"Russia","adminCode1":"33","fclName":"city, village,...","countryCode":"RU","lng":51.4913,"fcodeName":"seat of a second-order administrative division","toponymName":"Uni","fcl":"P","name":"Uni","fcode":"PPLA2","geonameId":478996,"lat":57.751,"adminName1":"Kirov","population":4767},{"countryName":"Russia","adminCode1":"54","fclName":"city, village,...","countryCode":"RU","lng":72.622724,"fcodeName":"populated place","toponymName":"Uki","fcl":"P","name":"Uni","fcode":"PPL","geonameId":1488608,"lat":56.991135,"adminName1":"Omsk","population":0},{"countryName":"Philippines","adminCode1":"07","fclName":"city, village,...","countryCode":"PH","lng":124.3252,"fcodeName":"populated place","toponymName":"Union","fcl":"P","name":"Union","fcode":"PPL","geonameId":1680262,"lat":10.6695,"adminName1":"Central Visayas","population":4581},{"countryName":"Philippines","adminCode1":"13","fclName":"city, village,...","countryCode":"PH","lng":126.1102778,"fcodeName":"populated place","toponymName":"Union","fcl":"P","name":"Union","fcode":"PPL","geonameId":1680267,"lat":9.7566667,"adminName1":"Caraga","population":2368}]}
And here is the output from our server
{"addresses":[{"address":"3666 LACEY WOODS PARK"},{"address":"3666 LACON RD"},{"address":"3666 LAKESTONE CIR"},{"address":"3666 E LINKS CIR"}]}
