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.