Java 对表单控件div的Ajax数组响应_Java_Ajax_Livesearch

Java 对表单控件div的Ajax数组响应

java ajax

Java 对表单控件div的Ajax数组响应,java,ajax,livesearch,Java,Ajax,Livesearch,我正在尝试添加/追加来自AJAX请求的响应到具有类列表组的div。你能告诉我怎么做吗我不知道如何在这里添加代码，所以我会改为添加照片。链接返回，我需要每个结果的匹配的\u全名部分我不知道要寻找什么来创建解决方案。我尝试添加href，但失败惨重这是预期的结果 $('.form-control').keyup(function(event) { var input = $(this).val(); console.log(input); $.ajax({

我正在尝试添加/追加来自AJAX请求的响应到具有类列表组的div。你能告诉我怎么做吗

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

。链接返回，我需要每个结果的

匹配的\u全名

部分

我不知道要寻找什么来创建解决方案。我尝试添加

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


您可以使用$循环从ajax响应接收的结果。每个循环并使用+=
将结果附加到某个变量，然后使用.html
在div下显示数据
演示代码：

var-lis=”“//声明
$（'.form control'）.keyup（函数（事件）{
$（“.result”）.html（“”；//空ul
var输入=$（this.val（）；
//如果输入不为空
如果（输入！=“”）{
$.ajax({
网址：'https://api.teleport.org/api/cities/',
键入：“GET”，
数据：“json”，
数据：{
搜索：输入
},
成功：功能（响应）{
//循环通过结果
$.each（响应[“_embedded”][“城市：搜索结果”]，函数（索引，元素）{
//附加
lis+=“”+元素。匹配全名+“”
});
//在ul下添加数据
$（“.result”）.html（lis）；
}
});
}
});
ul{
列表样式：无；
}
李{
边框：1px纯黑；
背景：灰色；
填充物：5px；
}

您可以使用$循环从ajax响应接收的结果。每个循环并使用+=
将结果附加到某个变量，然后使用.html
在div下显示数据
演示代码：

var-lis=”“//声明
$（'.form control'）.keyup（函数（事件）{
$（“.result”）.html（“”；//空ul
var输入=$（this.val（）；
//如果输入不为空
如果（输入！=“”）{
$.ajax({
网址：'https://api.teleport.org/api/cities/',
键入：“GET”，
数据：“json”，
数据：{
搜索：输入
},
成功：功能（响应）{
//循环通过结果
$.each（响应[“_embedded”][“城市：搜索结果”]，函数（索引，元素）{
//附加
lis+=“”+元素。匹配全名+“”
});
//在ul下添加数据
$（“.result”）.html（lis）；
}
});
}
});
ul{
列表样式：无；
}
李{
边框：1px纯黑；
背景：灰色；
填充物：5px；
}

这帮了我很大的忙，我很难理解embedded做了什么，但我现在正在查看它，但是当我键入城市全名只获取城市全名时，代码/列表不会更新，非常感谢！这给了我一个正确的方向你发送搜索值的url是否给出了结果？是的，但它给出了所有的结果，不是像这样的特定nameput url的结果->url:'https://api.teleport.org/api/cities/?search=“+输入
在浏览器中工作，即：https://api.teleport.org/api/cities/?search=america
这帮了我很大的忙，我很难理解embedded的功能，但我现在正在研究它，但是，当我键入城市全名仅获取城市全名时，代码/列表不会更新，非常感谢！这给了我一个正确的方向你发送搜索值的url是否给出了结果？是的，但它给出了所有的结果，不是像这样的特定nameput url的结果->url:'https://api.teleport.org/api/cities/?search=“+输入
在浏览器中工作，即：https://api.teleport.org/api/cities/?search=america
<body>          
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Enter a city..."
    <hr>

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