使用 json 数据自动完成答案

【问题标题】：Autocomplete with json data使用 json 数据自动完成
【发布时间】：2014-11-12 00:13:26
【问题描述】：

这段代码有两个问题：

json example:

{"json_list": [{"label": "Porto Rico", "value": 33}, {"label": "Portugal", "value": 32}]}

$("#user_country_name").autocomplete({
    source : function(request, response) {
        $.getJSON("/users/autocomplete/" + request.term, function(data) {
            response(data.json_list);
        });
    },
});

首先，当我选择一个国家时，输入框中的选定值应该是标签而不是值。因为用户应该看到国家而不是 id。

其次，如何填充隐藏字段$("#user_country_id") 为所选国家/地区的ID？

【问题讨论】：

标签： javascript jquery json jquery-ui jquery-autocomplete

【解决方案1】：

使用select 方法

select: function( event, ui ) {
  event.preventDefault();
  $("#user_country_name").val(ui.item.label);
}

【讨论】：

我不知道在我的例子中应该把这个方法放在哪里。

【解决方案2】：

您需要做的是解析 json 响应。如果您在访问时遇到任何问题，请使用 console.log()。

$( "#w-arrival-search" ).autocomplete({
        select: function (e, ui) {
            $("#w-arrival-search").val(ui.item.label);
            return false;
        },
        minLength: 3,
        source: function (request, response) {
            $.ajax({
                url: 'http://localhost:8080/mvn/autocomplete',
                data: request,
                success: function (data) {
                    var ParsedObject = $.parseJSON(data);
                    response($.map(ParsedObject, function (item) {
                        var results = item.iata_code + " - " + item.city_name;
                        return {
                            label: results
                        };

                    }));
                }
            });
        }
    });

【讨论】：