如何写入自动完成 json 对象？

Posted 2023-05-08

【中文标题】如何写入自动完成 json 对象？

【英文标题】：How to i write into autocomplete the json objects?

【发布时间】：2020-04-02 13:28:44

【问题描述】：

我使用 jquery 和 ajax 进行了自动完成请求，我请求了对象，它们出现在“网络”的预览选项卡中，但我一直无法将它们写入 html...

 $(document).ready(function() 
        $("#autocomplete").autocomplete(
            source: function(request, response) 
                $.ajax(
                    method: "GET",
                    dataType: "jsonp",
                    url: "https://www.blalba/?term=" + request.term,
                    success: function(data) 


                        var transformed = $.map(data.Search, function(el) 
                            return 
                                label: el.airport,
                                id: el.city
                            ;
                        );
                        response(transformed);
                    ,
                    error: function() 
                        response([]);
                    
                );
            

        );
    ); <

每个请求的对象都像这样

["airport":"Toate aeroporturile","city":"Roma","country_code":"IT","country":"Italia","airport_code":"ROM","city_code":"ROM","sort":27428841,"c2":0,"hidden_code":true,"airport":"Ciampino","city":"Roma","country_code":"IT","country":"Italia","airport_code":"CIA","city_code":"ROM","sort":25428841,"c2":1,"sub":true,"airport":"Fiumicino","city":"Roma","country_code":"IT","country":"Italia","airport_code":"FCO","city_code":"ROM","sort":25428841,"c2":2,"sub":true,"airport":"","city":"Roma","country_code":"AU","country":"Australia","airport_code":"RMA","city_code":"RMA","c2":0,"sort":36969,"hidden_code":true]

Any help would be very much appreciated !!

【问题讨论】：

您可以使用 JSON.parse() 解析 JSON，然后使用 ForEach 循环对其进行迭代。你可以参考这里***.com/questions/5289078/…

【参考方案1】：

根据您的问题不确定是什么问题， 我假设您想知道如何将结果添加到结果元素中。

这是我如何显示结果的示例：

HTML

<div id="results">
    <ul></ul>
</div>

jQuery（在 AJAX 请求的 success 部分中）

$.each(transformed, function(i, value)
    $('#results ul').append('<li>' + value.label + ', ' + value.id + '</li>');
);

请记住在使用 $('#results ul').empty() 完成自动完成过程后清理 <ul> 内容。

【讨论】：

你的意思是这样的？

$(document).ready(function() $("#autocomplete").autocomplete( source: function(request, response) $.ajax( method: "GET", dataType: "jsonp", url: "blalba/?term=" + request.term, 成功: function(data) $.each(transformed, function(i, value) $('#results ul').append(' ' + value.label + ', ' + value.id + ''); ); , ); ); );

您指定的代码中的位置是 response(transformed);。我给你的例子依赖于你在代码中使用的$.map函数，因此我提供的代码应该出现在$.map函数之后。