Question

我正在尝试实现与jquery autocomplete JSON data类似的功能。现在，如果ajax的网址为url: "http://ws.geonames.org/searchJSON"，则其工作正常，显示所有城市。但是，如果我将url更改为url: "citynames.js",，则不会显示自动裁剪结果。我的index.html是：

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/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: "citynames.js",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
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>
</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>

我的citynames.js是：

{"totalResultsCount":8503449,"geonames":[
                                         {"countryId":"130758","adminCode1":"23","countryName":"Iran","fclName":"mountain,hill,rock,... ","countryCode":"IR","lng":"49.13333","fcodeName":"mountain","toponymName":"Kūh-e Zardar","fcl":"T","name":"Kūh-e Zardar","fcode":"MT","geonameId":1,"lat":"32.98333","adminName1":"Lorestān","population":0},
                                         {"countryId":"130758","adminCode1":"15","countryName":"Iran","fclName":"city, village,...","countryCode":"IR","lng":"48.91667","fcodeName":"populated place","toponymName":"Zamīn Sūkhteh","fcl":"P","name":"Zamīn Sūkhteh","fcode":"PPL","geonameId":3,"lat":"32.48333","adminName1":"Khūzestān","population":0},
                                         {"countryId":"130758","adminCode1":"23","countryName":"Iran","fclName":"stream, lake, ...","countryCode":"IR","lng":"49.3667","fcodeName":"stream","toponymName":"Rūdkhāneh-ye Zākalī","fcl":"H","name":"Rūdkhāneh-ye Zākalī","fcode":"STM","geonameId":4,"lat":"32.8455","adminName1":"Lorestān","population":0},
                                         {"countryId":"130758","adminCode1":"15","countryName":"Iran","fclName":"city, village,...","countryCode":"IR","lng":"48.9","fcodeName":"populated place","toponymName":"Yekāhī","fcl":"P","name":"Yekāhī","fcode":"PPL","geonameId":5,"lat":"32.5","adminName1":"Khūzestān","population":0},
                                         {"countryId":"130758","adminCode1":"15","countryName":"Iran","fclName":"stream, lake, ...","countryCode":"IR","lng":"48.8","fcodeName":"stream","toponymName":"Āb-e Yasī","fcl":"H","name":"Āb-e Yasī","fcode":"STM","geonameId":6,"lat":"32.8","adminName1":"Khūzestān","population":0},
                                         {"countryId":"130758","adminCode1":"15","countryName":"Iran","fclName":"city, village,...","countryCode":"IR","lng":"48.2","fcodeName":"populated place","toponymName":"Tarvīḩ ‘Adāī","fcl":"P","name":"Tarvīḩ ‘Adāī","fcode":"PPL","geonameId":7,"lat":"32.1","adminName1":"Khūzestān","population":0}
                                         ]}

我的javascript代码有什么问题？提前谢谢。

jQuery自动选择不在本地工作的JSON数据

0 个答案: