jQuery UI 自动完成显示在列表上显示结果，但选择时打印值而不是标签

Question

我在自动完成工作方面遇到很多问题。首先，我遇到了验证不兼容的问题，因为我使用的是 jQuery Validation 和 jQuery 1.5，并且破坏了 Autocomplete 小部件上的 AJAX 功能。这个问题已经解决了，现在我的 PHP 控制器返回一个带有标签/值的 JSON 结果。当然，label是我要显示的名称，value是我需要提交的值。

我正在使用 PHP 的 JSON 输出示例，仅用于测试，目前不用于搜索。这是我发出 AJAX 请求时发回的内容：

[{"label":"Client example","value":1},{"label":"Lorem Ipsum","value":2},{"label":"Microsoft","value":3}]

使用下一个代码，我认为它将直接向我显示标签并提交 id。当我开始输入时，我会在客户端示例、Lorem Ipsum 和 Microsoft 列表中看到我想要的结果，但是当我选择其中一个时，列表会关闭，输入会显示值而不是标签。

$("#clientid").autocomplete({
    source: function(request, response) {
        $("#ajax-loader").fadeIn('normal');

        $.ajax({
            url: BASE_URL + 'projects/ajax/get_clients',
            data: request,
            dataType: "json",
            type: "POST",
            success: function(data) {
                response(data);
            }
        });

        $("#ajax-loader").fadeOut("normal");
    },
    minLength: 2
});

我还尝试了 @3nigma 在我寻找自动完成失败原因时建议我的代码：

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

什么也没有。查看 jQuery UI 网站和 Google 的示例，似乎 select 必须执行此操作，所以我尝试了：

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

但也不起作用。，我看到 上的值。

我不知道我还能尝试什么。我该如何解决这个问题？

先感谢您！

Answer 1

单个<输入/>只能存储一个值，没有任何标签。

<input type="text" value="Lorem Ipsum" name="myInput">

自动完成只是设置输入的值属性，这与您输入的输入值完全相同。无法直接在输入中显示与其值不同的标签。

您需要调整数据源以返回与标签相同的值，

[{"label":"Client example","value":"Client example"}...

但您会丢失您的值。处理提交的表单时，您可以使用标签检索值，假设标签是唯一的。

Answer 2

我能够在 select: 和 focus: 函数中使用另外两行代码来完成此任务。

在你的情况下添加这些

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