Question

我一直在尝试创建自动填充文本字段。我有一个名为countryName的文本框，用户可以在国家/地区名称的部分内容中键入。将显示匹配的国家/地区名称，当用户单击国家/地区名称时，其ID应放在名为countryId的隐藏字段中。

问题是，当选择其中一个匹配的国家/地区名称时，最后一个匹配项的ID将放在countryId字段中，而不是所选项目的ID。

例如：

在countryName文本字段中输入 Ja ，查找以 Ja 开头的所有国家/地区。返回的结果是牙买加（countryId = 108）和日本（countryId = 110）。如果我选择/点击，例如牙买加 - countryId字段（隐藏字段）中填充的值为110，而不是108.

这是我一直在使用的代码。我已经在其他项目中使用过它，但是这次却发现它有什么不同之处。

var c_id = 0;   // countryId
var sp_id = 0;  // stateprovinceId

$('#CountryName').autocomplete({
    source: function (request, response) 
        $.ajax({
            url: '/Ajax/CountrySearch',
            type: 'POST',
            dataType: 'json',
            data: { param: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    c_id = item.id;
                    return {
                        label: item.name,
                        value: item.name
                    }
                }));
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(xhr.responseText);
                alert(thrownError);
            }
        });
    },
    select: function () {
        event.preventDefault();
        alert(countryId);
        $('#CountryID').val(c_id);
    }
});

第二双眼睛会受到赞赏。

Answer 1

$.map

success会对响应进行迭代并分配全局c_id变量
完成后，c_id等于最后一项映射的id
然后，您使用$('#CountryID').val(c_id);

修改您的source以返回item.id作为值：

response($.map(data, function (item) {
    return {
        label: item.name,
        value: item.id
    }
}));

并更改handle the event如何利用回调中的参数并获取值

select: function (e, ui) {
    e.preventDefault();
    $(this).val(ui.item.label);
    $('#CountryID').val(ui.item.value);
}

演示http://jsfiddle.net/4doz4yuj/

使用JQuery UI AutoComplete在选择项

1 个答案: