jQuery UI autocomplete update hidden field with value but display label in UI, in conjunction with ASMX

Question

In the snippet below, how can I get the jquery autocomplete plugin to:

1. Update a hidden field with the UserID
2. Update '#MessageTo' with the full name

I believe I need to use .result, but I can't figure out the syntax. Please note that I'm using ASMX so I must do a post (don't want to enable security risk)

    $("#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
                        };
                    }));
                }
            });
        }
    });

I see some similar posts but not in conjunction with ASMX.

Answer 1

I believe you are interested in updating other HTML elements on the page, when the user selects something from an autocomplete-enabled textbox - is that right?

The code you have above probably works already, to provide autocomplete "suggestions" as the user types. If I understand correctly, You want to update a few fields after the user accepts one of the suggestion.s

To do that, use the select member of the autocomplete options.

 $("#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;
        }

    });

Also: your use of ASMX is irrelevant. From the perspective of autocomplete, it's just a source for data. Also, the use of POST is irrelevant. It is possible to configure ASMX on the server side to allow HTTP GET. It's not a security hole if you enable it. It's just a different way of accepting requests.

The autocomplete box cannot tell if the server side is ASMX or Python, or ASP-classic, or PHP, or anything else. If I have understood the question correctly, your comment that I see some similar posts but not in conjunction with ASMX is irrelevant.

Answer 2

You are correct that you want to use the select configuration option - the values you want are passed to your custom function as ui.item.value and ui.item.label. You can return false to prevent the default behaviour and access the target element using this. i.e.

$("#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;
   }
});