使用json数据自动完成

时间:2014-11-12 00:13:27

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

我对此代码有两个问题:

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?

2 个答案:

答案 0 :(得分:1)

使用select方法

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

答案 1 :(得分:-1)

您需要做的是解析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
                        };

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