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

asmx, jquery, jquery-ui, jquery-ui-autocomplete

Solution

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.

Problem

In the snippet below, how can I get the jquery autocomplete plugin to: - Update a hidden field with the UserID - 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.

Original source