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

问题描述：

我想用自动完成"所选项目填充我的表单数据.我的自动完成"功能正常，但我无法通过从自动完成"文本框中检索项目来弄清楚如何填写表单数据.这是我的代码

I want to Fill my Form Data with Autocomplete selected Item. My Autocomplete is works fine but i could not figure out how to fill my form data by retrieving the item from Autocomplete text box. Here is my code

[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视图中的Ajax函数

Ajax Function in cshtml View

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

答

您需要处理.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);

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

相关推荐