如何访问自动完成选择时返回的 JSON 的值？

Question

我有这种 JSON 服务器通过在文本框中键入的关键字返回的格式：

[{"id":1,"value":"some string!"}]

我希望当用户选择一个项目时，浏览器使用选择的 id 导航到另一个页面；它存在于返回的 JSON 中。这是我的自动完成代码：

$(function () {

$("#search-box").autocomplete({
    source: function (request, response) {
        $.ajax({
            type: "GET",
            url: "../Contenthandler/Search.ashx",
            dataType: "json",
            data: 'query=' + request.term,
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.value };
                })
       );

            }
        });
    },
    minLength: 3,
    open: function () {
        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    },
    select: function (event, ui) {
        if (ui.item) {
            window.location.href = "../ControlPanel.aspx?id=" + ui.item.id;
        }
    }
 });

});

但 ui.item.id 是 undefined。如何在选择事件中访问 id(1)？

Answer 1

您没有 id 作为 属性 您映射到数组的对象，在您的 ajax 成功中传递给自动完成。

您的对象只有一个 属性 label。添加您需要的其他属性或仅使用 label 属性

扩展您的响应对象

 response($.map(data, function (item) {
       return { label: item.value, id : item.id };// add "id" property
  });

实际上，如果从服务器返回的数据是问题顶部的结构...您不需要进行任何映射。您真的不需要自己的 ajax 并且可以将服务器路径直接连接到插件。

查看演示和文档以将 url 路径设置为源