Asp.net mvc 自动完成结果不会显示在asp.net mvc局部视图中

我的_布局视图中呈现了以下脚本：-

$(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")"  /> 

现在，在添加

AjaxSuccess

之后，将调用action方法，当我检查IE F12 developers tools上的响应时，我可以看到浏览器将收到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);


      }

---

首先，您不需要将您的

ajaxSuccess

功能包装在

ready

函数中

Second，当您从服务器获取

Json

时，最好使用POST

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

在我的例子中，它是如何工作的（IE11，MVC4）

布局上的脚本：

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

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

控制器方法：

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

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

---

您还可以在客户端使用

$.map

jquery函数完成此操作。您可以先查看示例，无需将您的

ajaxSuccess

功能包装到

ready

函数中

Second，当您从服务器获取

Json

时，最好使用POST

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

在我的例子中，它是如何工作的（IE11，MVC4）

布局上的脚本：

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

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

控制器方法：

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

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

---

---

您也可以在客户端使用

$.map

jquery函数执行此操作。您可以查看示例

您可以显示您的

自动完成

控制器方法吗？@teovankot我添加了相关的操作方法我打赌我发现了您的问题，在所有更新之后，您可以看到答案updateWell，您是否尝试将自动完成添加代码放入

load

方法中？最好使用

$.ajax

来获取数据，因为

加载

的工作方式有点不同，但是如果使用

加载

，请将自动完成代码添加到加载

完成

中，看看发生了什么。但我是否明白了你的意思？？？我到底需要在哪里使用load？你能展示你的

AutoComplete

controller方法吗？@teovankot我添加了相关的操作方法我打赌我发现了你的问题，你可以看到答案updateWell在所有更新之后，你试过将你的AutoComplete add code放入

load

方法吗？最好使用

$.ajax

来获取数据，因为

加载

的工作方式有点不同，但是如果使用

加载

，请将自动完成代码添加到加载

完成

中，看看发生了什么。但我是否明白了你的意思？？？我到底需要在哪里使用load？谢谢你的回复。现在，正如我提到的，如果我从ajaxSuccess中删除脚本，那么负责自动完成的action方法将永远不会在局部视图中调用，而在ajaxSuccess中添加scrip将调用负责自动完成的action方法，我将得到相关的json，，但结果不会显示在浏览器中。我在IE10、frefox、Chromeon上测试了这一点，需要提到的一点是，我正在使用jQuery加载模态弹出窗口中的部分视图，因此，可能自动完成脚本无法理解新添加的DOM？？您能否展示如何创建jQuery对话框并在其中加载视图？因为我在jQuery对话框中使用

PartialView

测试了您的示例，并且对自动完成没有问题。我将值添加到返回的json中，但这并没有解决问题，我认为这不会在所有方面造成任何问题，因为如果我将视图呈现为非部分视图，自动完成将很好地工作。现在，将局部视图显示为模式弹出窗口的脚本是：-bindForm函数做什么？感谢您的回复。现在，正如我提到的，如果我从ajaxSuccess中删除脚本，那么负责自动完成的action方法将永远不会在局部视图中调用，而在ajaxSuccess中添加scrip将调用负责自动完成的action方法，我将得到相关的json，，但结果不会显示在浏览器中。我在IE10、frefox、Chromeon上测试了这一点，需要提到的一点是，我正在使用jQuery加载模态弹出窗口中的部分视图，因此，可能自动完成脚本无法理解新添加的DOM？？您能否展示如何创建jQuery对话框并在其中加载视图？因为我在jQuery对话框中使用

PartialView

测试了您的示例，并且对自动完成没有问题。我将值添加到返回的json中，但这并没有解决问题，我认为这不会在所有方面造成任何问题，因为如果我将视图呈现为非部分视图，自动完成将很好地工作。现在，将局部视图显示为模式弹出窗口的脚本是：-bindForm函数的作用是什么？