Question

I’m trying to use the AutoComplete feature of JQuery to update multiple fields on an ASP.NET web page. The individual textbox is functioning perfectly, but I cannot figure out how to update multiple textboxes on the page once the user selects.

I’ve read many suggestions here that state I need to implement a result handler, but my intellisense is not showing that as an option, and IE I get a JS error saying that the object doesn’t support this method.

I am linking to jquery-1.4.2.min.js and jquery-ui-1.8.5.custom.min.js

Here’s my code:

$(function () {

        $("#Street1").autocomplete({

            source: function (request, response) {
                $.ajax({
                    url: "/address/FindAddress", type: "POST", dataType: "json",
                    data: { startAddress: request.term },

                    success: function (data) {

                        response($.map(data, function (item) {
                            return { label: item.DisplayText, value: item.ValueText, id: item.ID }
                        }))
                    }
                })

            } /* End source: function */

        })
   .result(function (event, data, formatted) {
        $("#Street2").val("test"); 
        })

         /* end Autocomplete */


    });  /* Function */

Answer 1

In this case you’d want the select handler, like this:

$("#Street1").autocomplete({
  source: function (request, response) {
    $.ajax({
      url: "/address/FindAddress", type: "POST", dataType: "json",
      data: { startAddress: request.term },
      success: function (data) {
        response($.map(data, function (item) {
            return { label: item.DisplayText, value: item.ValueText, id: item.ID }
        }));
      }
    });
  },
  select: function( event, ui ) {
    $("#Street2").val(ui.item.label); //or ui.item.value
  }
});

I’m not sure if you want the label, value or id in there, just use ui.item.whatever. Using select, whatever a value is chosen you can populate the #Street2 field as well.