选择项目时使用 JQuery UI 自动完成 returns 数据集中的最后一项

Question

我一直在尝试创建一个自动完成文本字段。我有一个名为 countryName 的文本框，用户可以在其中输入部分国家/地区名称。显示匹配的国家/地区名称，当用户单击国家/地区名称时，它的 ID 应该放在名为 countryId.

的隐藏字段中

The problem is that when one of the matching country names is selected, the ID of the last matches is placed in countryId field, not the ID of the selected item.

例如：

在 countryName 文本字段中输入 Ja 以查找以 Ja 开头的所有国家/地区。返回的结果是牙买加 (countryId = 108) 和日本 (countryId = 110)。如果我 select/click，比如牙买加 - 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 修改为 return 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 自动完成 returns 数据集中的最后一项

Using JQuery UI AutoComplete returns last item in dataset when selecting an item

jquery

json

jquery-ui

jquery-ui-autocomplete