Bri*_*ney 2 jquery json autocomplete
我无法弄清楚这些代码有多少取决于返回的JSON数据的结构.
例如,下面有一行:
name_startsWith: request.term
name_startsWith函数是在其他地方定义的还是某种隐式函数？
是什么reqest.term,它指的是？我找不到termhtml文档中其他地方引用的文本.
我想尝试将我自己的JSON url替换为示例以查看它是否有效但我不知道有多少示例需要根据JSON响应数据的结构进行更改.
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$( "#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 ) {
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="demo">
<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>
</div><!-- End demo -->
该data参数只是一个POJO(Plain Old Javascript Object),它被序列化为JSON字符串并作为参数集合发送到服务器.
从本质上说,您发布的4个参数:featureClass,style,maxRows并name_startsWith与价值观"p","full",12和值request.term(这是通过提供request由自动完成构件参数,我相信).
然后,服务器处理从客户端获取的参数并返回另一个JSON字符串,这次包含以下对象:
jsonp1290623850128({
"totalResultsCount": 55,
"geonames": [{
"countryName": "Indonesia",
"adminCode1": "30",
"fclName": "city, village,...",
"score": 19.488441467285156,
"countryCode": "ID",
"lng": 106.4183333,
"adminName2": "",
"adminName3": "",
"fcodeName": "populated place",
"adminName4": "",
"timezone": {
"dstOffset": 7,
"gmtOffset": 7,
"timeZoneId": "Asia/Jakarta"
},
"toponymName": "Test",
"fcl": "P",
"continentCode": "AS",
"name": "Test",
"fcode": "PPL",
"geonameId": 1959830,
"lat": -6.1052778,
"adminName1": "West Java",
"population": 0
},
{
"alternateNames": [{
"name": "http://en.wikipedia.org/wiki/Pomerode",
"lang": "link"
}],
"countryName": "Brazil",
"adminCode1": "26",
"fclName": "city, village,...",
"score": 18.81304168701172,
"countryCode": "BR",
"lng": -49.17694444,
"adminName2": "",
"adminName3": "",
"fcodeName": "populated place",
"adminName4": "",
"timezone": {
"dstOffset": -3,
"gmtOffset": -2,
"timeZoneId": "America/Sao_Paulo"
},
"toponymName": "Testo",
"fcl": "P",
"continentCode": "SA",
"name": "Testo",
"fcode": "PPL",
"geonameId": 3453245,
"lat": -26.74055556,
"adminName1": "Santa Catarina",
"population": 21898
},
// ---- [snip] ----
{
"countryName": "Turkey",
"adminCode1": "23",
"fclName": "city, village,...",
"score": 13.442560195922852,
"countryCode": "TR",
"lng": 39.126705,
"adminName2": "",
"adminName3": "",
"fcodeName": "populated place",
"adminName4": "",
"timezone": {
"dstOffset": 3,
"gmtOffset": 2,
"timeZoneId": "Europe/Istanbul"
},
"toponymName": "Testek",
"fcl": "P",
"continentCode": "AS",
"name": "Testek",
"fcode": "PPL",
"geonameId": 299236,
"lat": 38.458786,
"adminName1": "Elaz??",
"population": 0
}]
});
这基本上是具有两个属性的对象:totalResultsCount含有结果的整数的数目,和geonames包含携带特定性质的结果对象的阵列,如countryName,name,population等.
此JSON对象在success函数内部的$.ajax()函数中使用,您可以在其中迭代单个对象:
for(var i = 0; i < data.geonames.length; i++) {
var current = data.geonames[i]; // the current object
}
示例中的map函数只是将每个结果转换为一个新对象(包含label和value属性),并将它们收集到一个传递给response函数的数组中(由小部件传递给您的AJAX调用).
因此,要回答您的问题,如果您只是想更改URL,则服务需要使用与我粘贴的JSON结构相同的JSON结构.如果没有,您可以更改success函数以匹配服务返回的JSON结构.