如何将AJAX请求返回的matching_full_name追加至list-group类div？

我来帮你搞定这个问题！你需要先理清Teleport城市搜索API的返回结构，再在success回调里遍历结果，生成正确的链接元素追加到list-group中。下面是完善后的完整代码：

$('.form-control').keyup(function(event) { 
  var input = $(this).val(); 
  // 输入为空时直接清空列表，避免空请求残留内容
  if (!input.trim()) {
    $('.list-group').empty();
    return;
  }
  console.log(input); 
  $.ajax({ 
    url: 'https://api.teleport.org/api/cities/', 
    type: 'GET', 
    data: {search: input}, 
    success: function(response) { 
      // 1. 先清空列表，防止多次输入后内容重复叠加
      const $listGroup = $('.list-group').empty();
      
      // 2. 检查API是否返回有效搜索结果
      if (!response._embedded || !response._embedded["city:search-results"]) {
        $listGroup.append('<p class="list-group-item">No cities found</p>');
        return;
      }
      
      // 3. 遍历每个城市搜索结果
      response._embedded["city:search-results"].forEach(city => {
        // 提取所需字段：城市全称和详情页链接
        const cityFullName = city.matching_full_name;
        const cityDetailUrl = city._links["city:item"].href;
        
        // 4. 生成符合Bootstrap样式的可点击链接元素
        const $cityLink = $('<a>')
          .addClass('list-group-item list-group-item-action')
          .attr('href', cityDetailUrl)
          .attr('target', '_blank') // 可选：在新窗口打开详情页
          .text(cityFullName);
        
        // 5. 将元素追加到列表中
        $listGroup.append($cityLink);
      });
    },
    // 可选：添加错误处理，请求失败时给用户提示
    error: function() {
      $('.list-group').empty().append('<p class="list-group-item text-danger">Failed to load city data</p>');
    }
  }); 
});

关键细节说明 #

• 清空列表逻辑：每次请求前清空list-group，避免多次输入后内容重复；同时处理输入为空的场景，直接清空列表。
• API结构解析：Teleport的搜索结果嵌套在_embedded["city:search-results"]数组里，必须正确访问这个路径才能拿到数据，这可能是你之前拿不到内容的原因之一。
• 正确生成链接：之前你尝试追加href失败，大概率是因为没有正确创建<a>元素并绑定属性。这里用jQuery链式调用的方式生成元素，确保结构和样式都符合要求。
• 错误处理：新增error回调，在API请求失败时给用户明确提示，提升交互体验。

你的HTML结构无需修改，保持原样即可：

<body>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Enter a city...">
    <hr>
    <div class="list-group"></div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者RekiRl