7

在下面的代码片段中，我怎样才能让 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 结合使用。

4

2 回答 2

9

我相信您有兴趣在用户从启用自动完成的文本框中选择某些内容时更新页面上的其他 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 结合的评论是无关紧要的。

于 2012-04-05T21:21:19.613 回答
7

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

$("#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;
   }
});
于 2013-09-03T16:49:16.247 回答