自动完成结果不会显示在 ASP.NET MVC 部分视图中

Question

我有以下脚本在我的 _layout 视图中呈现：-

$(document).ready(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: target.attr("data-autocomplete-source"), 
            minLength: 1, 
            delay: 1000
        });   
    });  
});

我添加了以下字段以对其应用自动完成功能：-

<input  name="term" type="text" data-val="true" 
data-val-required= "Please enter a value."  
data-autocomplete-source= "@Url.Action("AutoComplete", "Staff")"  /> 

现在，如果我将视图渲染为部分视图，则脚本将不会触发，并且不会执行自动完成，因此我在 ajax-success 中添加了自动完成，如下所示：-

$(document).ready(function () {
    $(document).ajaxSuccess(function () {
        $("input[data-autocomplete-source]").each(function () {
            var target = $(this);
            target.autocomplete({
                source: target.attr("data-autocomplete-source"), 
                minLength: 1, 
                delay: 1000
            });
        });
    });
});

现在添加AjaxSuccess操作方法后将被调用，当我检查 IE F12 开发人员工具上的响应时，我可以看到浏览器将收到 json 响应，但字段内不会显示任何内容（我的意思是自动完成结果不会显示）在局部视图上）？

编辑

负责自动完成的操作方法是：-

public async Task<ActionResult> AutoComplete(string term)
      {


          var staff = await unitofwork.StaffRepository.GetAllActiveStaff(term).Select(a => new { label = a.SamAccUserName }).ToListAsync();
          return Json(staff, JsonRequestBehavior.AllowGet);


      }

编辑2

这是负责显示模式弹出窗口的脚本：-

$(document).ready(function () {

    $(function () {
        $.ajaxSetup({ cache: false });
        //$("a[data-modal]").on("click", function (e) {
            $(document).on('click', 'a[data-modal]', function (e){
            $('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
                $('#myModal').modal({
                    //height: 1000,
                    //width: 1200,
                    //resizable: true,
                    keyboard: true
                }, 'show');
                $('#myModalContent').removeData("validator");
                $('#myModalContent').removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse('#myModalContent');
                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", "disabled");
            $('#progress').show();
            if ($(this).valid()) {

                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                       if (result.ISsuccess) {
                            $('#myModal').modal('hide');
                            $('#progress').hide();
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            location.reload();
                            //  alert('www');
                        } else {

                            $('#progress').hide();
                            $('#myModalContent').html(result);
                            $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                            bindForm();
                        }
                    }
                });
            }
            else {
                $('.btn.btn-primary,.btn.btn-danger').prop("disabled", false);
                $('#progress').hide();
                return false;
            }

            return false;
        });
    }
});

Answer 1

首先，您不需要将ajaxSuccess函数包装在ready函数中。

其次，从服务器获取数据时最好使用POSTJson。

我试图解决你的问题，但没有运气。

这是它在我的例子中的工作原理（IE 11，MVC 4）

_Layout 上的脚本：

$(document).ajaxSuccess(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({
            source: function (request, response) {
                $.post(target.attr("data-autocomplete-source"), request, response);
            },
            minLength: 1,
            delay: 1000
        });
    });
});

控制器方法：

[HttpPost]
public JsonResult AutoComplete()
{
    return Json(new List<string>()
        {
            "1",
            "2",
            "3"
        });
}

部分视图 html：

<input name="term" type="text" data-val="true"
       data-val-required="Please enter a value."
       data-autocomplete-source="@Url.Action("AutoComplete", "Stuff")" />

更新：

我知道你的问题是什么。Jquery 自动完成需要具有lable和value属性的对象数组。因此，如果您像这样更改控制器代码，它将起作用。

public async Task<ActionResult> AutoComplete(string term)
{
    var staff = await unitofwork.StaffRepository.GetAllActiveStaff(term)
    .Select(a => new { label = a.SamAccUserName, value = a.SamAccUserName })
    .ToListAsync();
    return Json(staff, JsonRequestBehavior.AllowGet);
}

您也可以使用 jquery 函数在客户端执行此操作，您可以在此处$.map查看示例