javascript - 如何访问自动完成选择时返回的 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是未定义。如何在选择事件中访问 id(1)？

Answer 1

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

您的对象只有一个属性标签。添加您需要的其他属性，或者仅使用 label 属性扩展您的响应对象

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

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

查看有关将 url 路径设置为源的演示和文档