Ajax - 如何使用 Ajax/jquery 将选项添加到数据列表中

Question

我正在使用Flask, MySQL, and ajax 创建一个搜索框。 我在控制台中获得了 JSON 格式的搜索结果，但我想将其附加到我的 HTML 中 datalist 的选项值上。

这是 HTML -

<form class="cours-search">
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchbox" autocomplete="off" placeholder="Search Address, Owner Name   " name="city" list="results">
                                <datalist id="results">
                                <option value="Boston">
                                </datalist>
                                <div class="input-group-append">
                                    <button class="btn" type="submit">Search</button> 
                                </div>
                            </div>
                        </form>

这是我的 ajax 代码 -

<script>
    $(document).ready(function(){
        $("#searchbox").on("input", function(e){
            searchtext = $("#searchbox").val();
            
            $.ajax({
                method:"post",
                url:"/searchengine",
                // data:{backendname:valueName}
                data:{text:searchtext},
                success:function(res){
                    console.log(res);
                    //What Should I Do I Don't Know
                }
            })
        });
    })
</script>

这是控制台中的结果数据（JSON 格式）-

0: {address: "Delhi NCR"}
1: {address: "Dhar"}
length: 2
__proto__: Array(0)

我想在我的 HTML 中的 datalist <option> 中添加地址值。 非常感谢您。

Answer 1

要执行您需要的操作，您可以遍历 AJAX 请求的响应并创建新的 option 元素，其中包含 address 属性中的文本。试试这个：

// inside your AJAX callback:

let res = [{ address: "Delhi NCR" }, { address: "Dhar" }];
let options = res.map(o => `<option value="${o.address}">`);
$('#results').append(options);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cours-search">
  <div class="input-group">
    <input type="text" class="form-control" id="searchbox" autocomplete="off" placeholder="Search Address, Owner Name   " name="city" list="results">
    <datalist id="results">
      <option value="Boston">
    </datalist>
    <div class="input-group-append">
      <button class="btn" type="submit">Search</button>
    </div>
  </div>
</form>