jQuery UI Autocomplete shows displays on a list the results but when select, prints the value and not the label答案

【问题标题】：jQuery UI Autocomplete shows displays on a list the results but when select, prints the value and not the labeljQuery UI Autocomplete shows displays on a list the results but when select, prints the value and not the label
【发布时间】：2013-09-12 05:53:47
【问题描述】：

我在自动完成工作时遇到了很多问题。首先，我遇到了验证不兼容问题，因为我使用的是 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);
}

但也不起作用。我在<input /> 上看到了值。

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

提前谢谢你！

【问题讨论】：

见：stackoverflow.com/questions/6716266/…

标签： jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

单个只能存储一个值，没有任何标签。

&lt;input type="text" value="Lorem Ipsum" name="myInput"&gt;

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

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

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

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

【讨论】：

所以...我必须做一个隐藏输入来存储 id？它不会是唯一的；-(
是的，您可以添加一个隐藏字段来存储 ID。您需要在自动完成 js 代码中手动设置此字段的值

【解决方案2】：

我能够在 select: 和 focus: 函数中使用另外 2 行代码来完成此操作。

在你的情况下添加这些

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

【讨论】：