jQuery UI 自动完成更新隐藏字段的值，但在 UI 中显示标签，结合 ASMX答案

【问题标题】：jQuery UI autocomplete update hidden field with value but display label in UI, in conjunction with ASMXjQuery UI 自动完成更新隐藏字段的值，但在 UI 中显示标签，结合 ASMX
【发布时间】：2012-04-05 20:51:29
【问题描述】：

在下面的sn-p中，如何获取jquery自动完成插件：

使用 UserID 更新隐藏字段
使用全名更新“#MessageTo”

我相信我需要使用 .result，但我无法弄清楚语法。请注意，我使用的是 ASMX，所以我必须发帖（不想启用安全风险）

    $("#MessageTo").autocomplete({
        dataType: "json",
        autoFocus: true,
        minLength: 3,
        source: function (request, response) {
            var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }";

            return jQuery_1_7_1.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '/Services/Users.asmx/GetNames',
                data: postParams,
                dataType: "json",
                success: function (data) {
                    response($.map(data.d.Users, function (c) {
                        return {
                            label: c.FullName,
                            value: c.UserID
                        };
                    }));
                }
            });
        }
    });

我看到一些类似的帖子，但没有与 ASMX 结合。

【问题讨论】：

d 属性对于 data.d 是什么？
响应（数据）在 json 对象 d 中包含有用的数据

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

【解决方案1】：

我相信您有兴趣更新页面上的其他 HTML 元素，当用户从启用自动完成的文本框中选择某些内容时 - 对吗？

您上面的代码可能已经有效，可以在用户键入时提供自动完成“建议”。如果我理解正确，您希望在用户接受其中一项建议后更新一些字段。s

为此，请使用自动完成选项的select 成员。

 $("#MessageTo")
    .autocomplete({
        dataType: "json",
        autoFocus: true,
        minLength: 3,
        source: function (request, response) {
            var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }";

            return jQuery_1_7_1.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: '/Services/Users.asmx/GetNames',
                data: postParams,
                dataType: "json",
                success: function (data) {
                    response($.map(data.d.Users, function (c) {
                        return {
                            label: c.FullName,
                            value: c.UserID
                        };
                    }));
                }
            });
        }, 

        select: function (event, ui) {
            var v = ui.item.value;
            $('#MessageTo').html("Something here" + v);
            $('#Hidden1').html("Something else here" + v);
            // update what is displayed in the textbox
            this.value = v; 
            return false;
        }

    });

另外：您对 ASMX 的使用是无关紧要的。从自动完成的角度来看，它只是数据的来源。此外，POST 的使用也无关紧要。可以在服务器端配置 ASMX 以允许 HTTP GET。如果您启用它，这不是安全漏洞。这只是接受请求的另一种方式。

自动完成框无法判断服务器端是 ASMX 还是 Python、ASP-classic、PHP 或其他任何东西。如果我正确理解了这个问题，那么您关于我看到一些类似的帖子但没有与 ASMX 结合的评论是无关紧要的。

【讨论】：

另外，使用 ui.item.label 以使全名显示在您的自动完成中。

【解决方案2】：

您想使用选择配置选项是正确的 - 您想要的值作为ui.item.value 和ui.item.label 传递给您的自定义函数。您可以return false 阻止默认行为并使用this 访问目标元素。即

$("#MessageTo").autocomplete({
   /* Existing code is all OK */

   select: function (event, ui) {
      // Set autocomplete element to display the label
      this.value = ui.item.label;

      // Store value in hidden field
      $('#hidden_field').val(ui.item.value);

      // Prevent default behaviour
      return false;
   }
});

【讨论】：