jQuery UI自动完成更新隐藏字段的值,但在UI中与ASMX一起显示标签

Question

在下面的代码段中,如何获取jquery自动完成插件:

1. 使用UserID更新隐藏字段
2. 使用全名更新'#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一起使用.

Answer 1

我相信当用户从启用自动填充功能的文本框中选择某些内容时,您有兴趣更新页面上的其他HTML元素 - 是吗？

您上面的代码可能已经有效,可以在用户输入时提供自动填充"建议".如果我理解正确,您希望在用户接受其中一个建议后更新几个字段

为此,请使用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不一致的评论是无关紧要的.

Answer 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;
   }
});