JQuery UI 自动完成小部件在引导模式上不起作用答案

【问题标题】：JQuery UI Autocomplete widget not working on a bootstrap modalJQuery UI 自动完成小部件在引导模式上不起作用
【发布时间】：2016-04-03 14:01:23
【问题描述】：

我有一个引导模式对话框，上面有一个文本框，我想利用 jQuery UI 自动完成小部件的功能。然而，自动完成小部件根本没有被触发。我知道这一点，因为我在控制器上的操作上放置了一个断点，该操作应该返回由自动完成文本框呈现的 Json。动作永远不会被击中

出于好奇我做错了什么，我将文本框复制粘贴到一个视图上，令我沮丧的是，我在控制器中的操作上的断点被击中。我已将其缩小到这样一个事实，即一旦 DOM 加载，文本框可能永远不会连接到使用自动完成功能。这是我的模态框上的文本框

 <input type="text" name="someName" id="autocomplete" data-autocomplete-url="@Url.Action("Autocomplete", "warehouses")" />

这里是返回Json的action方法

public ActionResult Autocomplete(string term)
    {
        string[] names = { "Auma", "Dennis", "Derrick", "Dylan", "Mary", "Martha", "Marie", "Milly", "Abel", "Maria", "Bergkamp", "Arsene", "Alex", "Mwaura", "Achieng" };
        var filtered = names.Where(a => a.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0);
        return Json(filtered, JsonRequestBehavior.AllowGet);
    }

这是我如何连接文本框以使用自动完成小部件

$(document).ready(function () {
$('#autocomplete').autocomplete({
    source: $(this).data('autocomplete-url'),
    data: {term: $(this).val() }
});

});

我看到有人问过类似的问题，但没有一个是因为动作没有被击中。

【问题讨论】：

而不是 $(this).data('... 尝试 $('#autocomplete').data('... 并在控制台中查找任何错误。
不需要data: {term: $(this).val() }，因为自动完成功能会自动为您完成。
我尝试更改为 $('#autocomplete') 但控制台上没有错误。我还删除了 data:{term: $(this).val() } 但没有区别。如果我只是将文本框复制到一个视图并尝试输入一个字母，我会得到结果。这意味着问题出在模态对话框中
您是在模态中显示您的主页中的一些 div 还是在模态中显示部分视图？?..如果您在模态中显示部分视图，则在部分而不是主视图中编写此代码。
我的模态不显示部分视图中的标记，我在其中设置了模态的 html 而没有调用部分视图。

标签： asp.net-mvc asp.net-mvc-5 jquery-ui-autocomplete

【解决方案1】：

根据Bootstrap 3 的文档，它们公开了一组事件，您可以使用它们的大部分 JS 功能挂钩。

在这种情况下，事件是： 显示、显示、隐藏、隐藏和加载

以下代码将在显示模式后初始化您的自动完成输入字段。（将 myModal 替换为您要显示的模态的 id）

$(document).ready(function () {
  $('#myModal').on('shown.bs.modal', function (e) {

    $("#autocomplete').autocomplete('destroy'); //remove autocompete to reattach
    $('#autocomplete').autocomplete({
      source: $(this).data('autocomplete-url'),
      data: {term: $(this).val() }
    });

  });
});

如果您要获取包含输入字段的部分并在切换期间将其附加到模式，最好在该 ajax 请求的回调中执行此初始化。

【讨论】：