使用AJAX和Jquery自動完成功能填寫表單數據

Question

我想用自動填充選定項填寫我的表單數據。我的自動填充工作正常，但我無法弄清楚如何通過從自動填充文本框中檢索項來填寫表單數據。這裏是我的代碼

[HttpPost] 
public JsonResult GetAutocomplete(string term) 
{ 
    var custo = (from customer in db.tbl_Customers 
       where customer.Name.Contains(term) 
       select new { label = customer.Name, val = customer.customer_ID }).ToList(); 
    return Json(custo); 
} 

[HttpPost] 
public JsonResult GetDetails(string id) 
{ 
    tbl_Customers custodetail = db.tbl_Customers.Single(x => x.customer_ID.ToString() == id); 
    return Json(custodetail, JsonRequestBehavior.AllowGet); 
} 

在CSHTML查看

function custoautocomplete() 
{ 
    $(function() { 
     $("#Customer_ID").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        cache: false, 
        async: false, 
        url: '/Orders/GetAutocomplete/', 
        data: "{ 'term': '" + request.term + "'}", 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         response($.map(data, function (item) { 
          return item; 
         })), 
         function (item) { 
          $.ajax({ 
           cache: false, 
           async: false, 
           type: "POST", 
           url: '/Orders/GetDetails/', 
           data: { "id": data.item.Customer_ID}, 

          success: function (data) { 
           $('#Customer_Contact').val(data.Customer_Contact) 
           $("#Billing_Address").val(data.Billing_Address) 
           $("#Shipping_Address").val(data.Shipping_Address) 
          } 
         }); 
        } 
       }); 
      } 
     }); 
    }); 
} 

Answer 1

您需要處理.select事件，讓你的AJAX調用有更新基於所選值的DOM Ajax的功能。你也應該在source事件的Ajax調用的變化如下

$("#Customer_ID").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      cache: false, 
      // async: false, NEVER do this 
      url: '@Url.Action("GetAutocomplete", "Orders")', // don't hard code your url's 
      data: { term: request.term }, // change 
      dataType: "json", 
      type: "POST", 
      // contentType: "application/json; charset=utf-8", delete 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { 
         label: item.label, 
         id: item.id 
        } 
       })); 
      } 
     }) 
    },select: function(event, ui) { 
     $.ajax({ 
      cache: false, 
      type: "POST", 
      url: '@Url.Action("GetDetails", "Orders")', 
      data: { id: ui.item.value }, 
      success: function (data) { 
       $('#Customer_Contact').val(data.Customer_Contact) 
       $("#Billing_Address").val(data.Billing_Address) 
       $("#Shipping_Address").val(data.Shipping_Address) 
      } 
     }); 
    } 
}); 

指出作爲一個側面說明，你不需要JsonRequestBehavior.AllowGet在GetDetails()方法，因爲它標誌着[HtpPost]。此外，您應該返回一個匿名對象（有沒有點對面時，你永遠不使用它的網絡發送額外的數據），例如

var custodetail = db.tbl_Customers 
    .Single(x => x.customer_ID == id) // .ToString() not required - see below 
    .Select(x => new 
    { 
     Customer_Contact = x.Customer_Contact, 
     .... 
    }; 

，你的參數應該是一樣的customer_ID類型，例如

public JsonResult GetDetails(int id) 

也東東修改GetAutocomplete到

var custo = (from customer in db.tbl_Customers 
      where customer.Name.Contains(term) 
      select new { label = customer.Name, id = customer.customer_ID }); 
return Json(custo);