这是一个让我们有点疯狂的事情。我们从 jQuery UI 页面http://jqueryui.com/autocomplete/#remote-jsonp实现了 JSONP 的示例脚本，然后就在它旁边，我们编写了一个最小修改的版本。
这是踢球者。jQuery ui 的脚本可以在 IE 中运行，而我们的脚本只能在 Firefox、Chrome 等中运行
唯一的区别是我们的数据源。
当我们将数据发送给客户端时，我们需要对数据做一些神奇的事情吗？我们已经尝试将它包装在命名函数等中。
<!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>
对于傻笑，这是工作 json 服务的输出
{"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}]}
这是我们服务器的输出
{"addresses":[{"address":"3666 LACEY WOODS PARK"},{"address":"3666 LACON RD"},{"address":"3666 LAKESTONE CIR"},{"address":"3666 E LINKS CIR"}]}