且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用AJAX和Jquery自动完成功能填写表单数据

更新时间:2023-02-15 14:36:34

您需要处理.select事件,并在其中进行ajax调用以根据所选值更新DOM.您还应该在source事件的ajax调用中进行更改,如下所述

You need to handle the.select event and make you ajax call there to update the DOM based on the selected value. You should also make the changes in the ajax call of the source event as noted below

$("#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)
            }
        });
    }
});

作为旁注,由于GetDetails()方法已标记为[HtpPost],因此您无需在GetDetails()方法中使用JsonRequestBehavior.AllowGet.另外,您应该返回一个匿名对象(例如,从不使用它就不会在网络上发送额外的数据),例如

As a side note, you do not need JsonRequestBehavior.AllowGet in the GetDetails() method since its marked [HtpPost]. In addition you should be returning an anonymous object (there is no point sending extra data across the wire when you never use it), for example

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的类型相同,例如

and your parameter should be the same as the type of customer_ID, for example

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);