Question

在下面的代码段中，如何将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一起使用。

Answer 1

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

您上面的代码可能已经有效，可以提供自动完成功能＆＃34;建议＆＃34;作为用户类型。如果我理解正确，您希望在用户接受其中一个建议后更新几个字段。

为此，请使用自动填充选项的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;
   }
});

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

2 个答案: