JQuery UI autocomplete updates a hidden field with a value, but displays a label in the user interface, combined with ASMX

Question

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

• Update hidden field with UserID
• Update '#MessageTo' with full name

I believe that I need to use .result, but I cannot understand the syntax. Please note that I am using ASMX, so I have to make a message (I do not want to include a 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 messages, but not in conjunction with ASMX.

Answer 1

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

You may already have the above code to provide autocompletion of "offers" by user type. If I understand correctly, you want to update several fields after the user accepts one of the offers.

To do this, use the select parameter for 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 does not matter. In terms of autocompletion, it's just a data source. In addition, the use of POST does not matter. You can configure ASMX on the server side to enable HTTP GET. This is not a security hole if you turned it on. This is just another way to accept requests.

The autocomplete block cannot determine if the server side is ASMX or Python, or ASP-classic, or PHP, or something else. If I understand the question correctly, your comment, which I see in some similar posts, but not in combination with ASMX, does not matter.

Answer 2

You are right that you want to use the configuration option - the values ​​you need are passed to your user function as ui.item.value and ui.item.label . You can return false prevent the default behavior and access the target element with 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; } });