Ajax 数组对表单控制 div 的响应答案

【问题标题】：Ajax array response to form-control divAjax 数组对表单控制 div 的响应
【发布时间】：2020-11-08 20:09:21
【问题描述】：

我正在尝试添加/附加我对 AJAX 请求的响应 (here is the response) 到带有类列表组的 div。你能告诉我怎么做吗？

我不知道如何在这里添加代码，所以我会添加照片。

My code。链接返回this，我需要每个结果的matching_full_name 部分。

我不知道要寻找什么来创建解决方案。我尝试附加href，但失败得很惨。

This 是预期结果。

$('.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 在这里

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

    <div class="list-group"></div>

【问题讨论】：

标签： java ajax livesearch

【解决方案1】：

您可以使用 $.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>

【讨论】：

这很有帮助，我很难理解 _embedded 的作用，但我现在正在查看它，但是当我输入城市的全名以仅获取城市时，代码/列表不会更新全名，非常感谢！这给了我正确的方向
您发送搜索值的那个网址是否会给您结果？
是的，但它给出了所有结果，而不是特定名称的结果
像这样输入 url -> url: 'https://api.teleport.org/api/cities/?search='+input 它在浏览器中工作，即：https://api.teleport.org/api/cities/?search=america