我试图添加/附加AJAX请求的响应(这是对带有class list group的div的响应(。你能告诉我怎么做吗？
我不知道如何在这里添加代码，所以我会添加照片。
我的代码。链接返回这个，我需要每个结果的matching_full_name部分。
我不知道该寻找什么来创建解决方案。我试着附加href，但失败得很惨。
这是预期的结果。
$('.form-control').keyup(function(event) {
var input = $(this).val();
console.log(input);
$.ajax({
url: 'https://api.teleport.org/api/cities/',
type: 'GET',
data: 'json',
data: {search: input},
success: function(response) {
// I dont know what to write here
HTML HERE
<body>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter a city..."
<hr>
<div class="list-group"></div>
您可以使用$.each循环从ajax响应中循环接收结果，并使用+=将结果附加到某个变量，然后使用.html显示div下的数据。
演示代码：
var lis = ""; //declare
$('.form-control').keyup(function(event) {
$(".result").html(" "); //empty ul
var input = $(this).val();
//if input not empty
if (input != "") {
$.ajax({
url: 'https://api.teleport.org/api/cities/',
type: 'GET',
data: 'json',
data: {
search: input
},
success: function(response) {
//loop through result
$.each(response["_embedded"]["city:search-results"], function(index, element) {
//append
lis += "<li>" + element.matching_full_name + "</li>"
});
//add data under ul
$(".result").html(lis);
}
});
}
});ul {
list-style: none;
}
li {
border: 1px solid black;
background: grey;
padding: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter a city..." <hr>
<div class="list-group">
<ul class="result">
<!--here result will come-->
</ul>
</div>