How to make another ajax call upon selection of autocomplete text field value in ASP.NET MVC 4?

Question

I have an autocomplete text field, that uses JSON like so:

          $(function () {
              var src = '@Url.Action("GetParts", "Parts")'
              $("#autoCompleteBox").autocomplete({
                  source: function (request, response) {
                      $.ajax({
                          url: src,
                          async: true,
                          dataType: "json",
                          data: {
                              partNumber: $("#autoCompleteBox").val()
                          },
                          success: function (data) {
                              response(data[0]);
                          }
                      });
                  }
              });
          });

What I want to do is when the user selects the item from the suggested list is make another ajax call to get specific information about that item and populate other textboxes on the page.

What is the best approach for this?

Answer 1

You can do that in the select event of the autocomplete.

$(function () {
    var src = '@Url.Action("GetParts", "Parts")'
    $("#autoCompleteBox").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: src,
                async: true,
                dataType: "json",
                data: {
                    partNumber: $("#autoCompleteBox").val()
                },
                success: function (data) {
                    response(data[0]);
                }
            });
        },
        select: function (event, ui) {
           var item= ui.item.label;
           //Now make the ajax call here
           $.post("SomeValidUrl", new { id : item } ,function(res){
               // do something with res
           });
        }
    });
});