jquery ui-自动完成选择值而不是标签答案

【问题标题】：jquery ui- Autocomplete selects value instead of labeljquery ui-自动完成选择值而不是标签
【发布时间】：2019-11-04 07:51:53
【问题描述】：

这是我的代码

$("#txtBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("Get", "Ctrl")',
                        dataType: 'json',
                        data: "{ 'mode': 'associate','prefix': '" + request.term + "' }",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            var transformed = $.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Id
                                };
                            });
                            response(transformed);
                        },
                        error: function() {
                            alert('error');
                        },
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    console.log('ui.item.label', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                },
                focus: function (event, ui) {
                    console.log('ui.item.label - focus', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                }
            });
        });

我从 c# 控制器获取名称和 ID 作为 Json。我想自动完成文本框以显示名称，并在保存时将其发送回后端，我想发送名称的 ID。但是现在当我输入名称并从建议列表中选择名称时。 Id 显示在文本框中而不是名称中。我在哪里犯了错误。有人可以指导我吗？

【问题讨论】：

根据示例，您将需要return false 来处理select 和focus

标签： javascript jquery jquery-ui

【解决方案1】：

我建议您保留两个 <input /> 一个 type=text 和另一个 type=hidden。您可以在 type=text 上初始化自动完成，并在 type=hidden 中设置值，在服务器中您可以访问隐藏类型的值。

例如

<input type="text" id="txtBox" name="label" />
<input type="hidden" id="valBox" name="value" />

$("#txtBox").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("Get", "Ctrl")',
                        dataType: 'json',
                        data: "{ 'mode': 'associate','prefix': '" + request.term + "' }",
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            var transformed = $.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Id
                                };
                            });
                            response(transformed);
                        },
                        error: function() {
                            alert('error');
                        },
                    });
                },
                minLength: 3,
                select: function (event, ui) {
                    console.log('ui.item.label', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                    $('#valBox').val(ui.item.value);
                },
                focus: function (event, ui) {
                    console.log('ui.item.label - focus', ui.item.label);
                    $('#txtBox').val(ui.item.label);
                }
            });
        });

在您的控制器中，您可以访问两个值 Request["label"], Request["value"]

【讨论】：