我当前的 json 响应就像
{"airportname":"HAL BANGALORE","icaocode":"VOBG","airportInfo":"HAL Bangalore Airport"}
当我搜索“VOBG”时，它应该显示HAL BANGALORE, HAL Bangalore Airport,VOBG。
Jquery 代码:
$(document).ready(function(){
$("#srch-term").autocomplete({
minLength : 3,
source : function(request, response) {
var url = "http://privateflight.in:8080/RestWebServices/airports/airportsearch?searchKey=" + $('#srch-term').val();
$.ajax({
url : url,
data: '',
type : "GET",
dataType : "json",
contentType: "application/json; charset=utf-8",
success : function(data) {
var code=[];
var air=[];
$.each( data, function( i, item ) {
//alert(data[i]['icaocode']);
code[i]=data[i]['icaocode'];
air[i]=data[i]['airportname'];
// alert(code[i]);
// alert(i);
//data[t].icaocode
//console.log(JSON.stringify(data));
//alert(JSON.stringify(data));
//alert(item);
//response(code[i]);
response($.map(data,function(item){
//alert('success');
return {
//label: item.AccentCity,
value: item.airportname,
label: item.icaocode
//label: item.airportInfo
}
}));
});
},error: function(xhr, textStatus) {
alert('error');
}
});
}
});
});
HTML:
<input type="text" class="form-control" placeholder="Search" name="srch-term" style="text-transform: uppercase;" id="srch-term">
我怎样才能达到这个结果？
最佳答案
主要变化已开启
response($.map(data, function (item) {
return {
value: item.airportname,
label: item.airportname + ", " + item.airportInfo + ", " + item.icaocode
}
}));
这是您需求的完整版本。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#srch-term {
width: 25em;
}
</style>
<script>
$(document).ready(function () {
function log(message) {
$("<div>").text(message).prependTo("#log");
$("#log").scrollTop(0);
}
$("#srch-term").autocomplete({
minLength: 3,
source: function (request, response) {
$.ajax({
url: "http://privateflight.in:8080/RestWebServices/airports/airportsearch",
data: {
searchKey: $('#srch-term').val()
},
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data, function (item) {
return {
value: item.airportname,
label: item.airportname + ", " + item.airportInfo + ", " + item.icaocode
}
}));
},
error: function (xhr, textStatus) {
alert('error');
}
});
},
select: function (event, ui) {
log(ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value);
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="srch-term">Airport: </label>
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"/>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Selected:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>关于jquery - AJAX 自动完成响应格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31848079/