Question

我已经回顾了很多例子，但未能找到一个例子来帮我弄清楚我的问题。

我已经完成了jquery自动完成响应的所有工作。但是数据没有显示在textboxfor中。

HTML

<div class="modal-body">
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.Ship_To_Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div id="ShipToName" class="col-md-10">
                @Html.TextBoxFor(model => model.Ship_To_Name, new { @class = "autocomplete_with_hidden", data_url = Url.Action("AutoComplete", "Customer") })
                @Html.HiddenFor(model => model.Ship_To_Code, new { id = "ShipToCode" })
                @Html.ValidationMessageFor(model => model.Ship_To_Name, "", new { @class = "text-danger" })
            </div>
        </div>

以下是调用局部视图的方法。

     <a class="btn btn-success" data-modal="" href="/WebOrder/CreateShipTo" id="btnCreate">
        <span class="glyphicon glyphicon-plus"></span>
    </a>

   <!-- modal placeholder-->
   <div id='myModal' class='modal fade in'>
     <div class="modal-dialog">
        <div class="modal-content">
            <div id='myModalContent'></div>
        </div>
     </div>
  </div>

jquery的

以下代码正常运行但我无法显示数据。

$(function () {

    $('#myModalContent').on('keyup', '#Ship_To_Name.autocomplete_with_hidden', function (event) {

        var target = $(this);

        target.autocomplete({
            minLength: 3,
            source: function (request, response) {
                var url = $(this.element).data('url');

                $.ajax({
                    async: false,
                    cache: false,
                    dataType: "json",
                    type: "POST",
                    url: url,
                    data: { "term": request.term },

                    success: function (data) {
                         response($.map(data, function (item) {
                            return {
                                label: item.label,
                                value: item.id
                            };
                        }))
                    }
                });
            },
        });

    });
});

控制器：

public ActionResult Autocomplete(string term)
{
    var model = db.Customers
                   .Where(m => term == null || m.Customer_Name.StartsWith(term))
                   .Take(10)
                   .Select(m => new
                   {
                       label = m.Customer_Name,
                       id = m.Ship_To_Code
                   }).ToArray();

    return Json(model, JsonRequestBehavior.AllowGet);
}

控制器

    public ActionResult CreateShipTo(WebOrderVM webOrderVM)
    {
        return PartialView("_AddShipToInfo", webOrderVM);
    }

Answer 1

我在这看到一个小问题。您正在该文本框上的每个按键事件上注册jquery ui auto完整功能！我不认为这是必要的。您可以只注册一次。

此外，要启用自动填充功能，您需要的代码量最少

$(function () {

    $("#Name").autocomplete({
        source: $("#Name").data('url'),
        minLength: 1,
        select: function (event, ui) {

          //If you want to do something custom on the select event,
          //  you may do it here
          // Ex : $("#SomeDiv").html(ui.item.label);
        }
    });
});

这应该像lonog一样，因为你的动作方法会返回数据。

public ActionResult Autocomplete(string term)
{
    var model = db.Customers
                   .Where(m => term == null || m.Customer_Name.StartsWith(term))
                   .Take(10)
                   .Select(m => new
                   {
                       label = m.Customer_Name,
                       id = m.Ship_To_Code
                   }).ToArray();

    return Json(model, JsonRequestBehavior.AllowGet);
}

如果您希望自动完成使用动态加载的内容，则应在将内容注入DOM后注册自动完成

快速示例

$.get(someUrlToGetDynamicContent,function(res){

   $("#SomeContainer").append(res);
   $(".someClassNameForTheTextBox").autocomplete({
                    source: urlToGetTheAutoCompleteData,
                    minLength: 1,
                    select: function (event, ui) {  }
   });

})

mvc部分视图自动完成使用模式jquery不显示textboxfor

1 个答案: