为什么我的 select2 自动完成方法没有被执行？答案

【问题标题】：Why isn't my select2 autocomplete method getting executed?为什么我的 select2 自动完成方法没有被执行？
【发布时间】：2014-08-15 19:49:06
【问题描述】：

我正在尝试在我的 ASP.NET MVC 4 网站的主布局上实现 select2。

我希望它在用户开始输入（最少 2 个字母）后立即调用我的方法来使用用户已经输入的字母查询数据库。除了，当我开始输入时，我的方法永远不会被调用。我发出了一些警报，我可以看到我正在输入的内容，但我认为 select2 没有触发。

这是标签中的脚本和css引用：

<script src="/Content/select2/select2.js"></script>
<link href="/Content/select2/select2.css" rel="stylesheet" />

这是我的 layout.cshtml 文件中的搜索框：

<div class="navbar-header hidden-xs pull-right" style="padding-top: 10px; margin-left: 10px;">
  <input id="search" class="form-control" placeholder="Search..." type="text" data-autocomplete-url="/Home/AutoFillValues" />
</div>

这是我的布局页面的底部，其中出现了 select2 内容：

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
@RenderSection("scripts", required: false)

<script type="text/javascript">
    $(document).ready(function () {
        $("#search").select2({
            placeholder: "Search...",
            minimumInputLength: 2,
            ajax: {
                url: "~/Home/AutoFillSearch",
                dataType: 'jsonp',
                data: function(search) {
                    return {
                        q: search
                    };
                },
                results: function(search, page) {
                    return { results: data.Results };
                }
            }
        });
    });
</script>

最后，这是我的控制器方法（我还不担心这里的代码，我只想看到我的断点在第一行被命中...）：

public ActionResult AutoFillValues()
{
    // Get all wrestlers and all teams
    var players = _playerRepo.Query().Where(w => w.Division == "Division I" && w.Conference != null);
    var schools = players.Select(w => w.School).Distinct();

    ArrayList list = new ArrayList();

    foreach (var school in schools)
    {
        var hyperlinkFormat = "<a href=\"{0}\">{1}</a>";

        //@HttpUtility.UrlEncode(Model.Team.Name, System.Text.Encoding.UTF8)
        list.Add(string.Format(hyperlinkFormat, string.Format(RosterPath, school), string.Format(RosterText, school)));
    }

    foreach (var player in playerss)
    {
        var hyperlinkFormat = "<a href=\"{0}\">{1}</a>";

        //@HttpUtility.UrlEncode(Model.Team.Name, System.Text.Encoding.UTF8)
        list.Add(string.Format(hyperlinkFormat, string.Format(RosterPath, player.School), string.Format(RosterText, player.School)));
    }

    return Json(list.ToArray());
}

【问题讨论】：

您是否在控制台中看到任何消息
没有。我曾经有一个“onkeydown”事件来测试它，这是我在字段中输入时唯一发生的事情。现在没有事件发生。当我第一次打开控制台窗口时，出现一个错误：“Uncaught TypeError: undefined is not a function”，它把它扔到 jquery-unobtrusive-ajax.js 第 115 行
尝试修复它，看看它是否能解决您的问题。如果该错误出现在 select 2 字段中，则可能会导致奇怪的行为
$("a[data-ajax=true]").live("click", function (evt) { evt.preventDefault(); asyncRequest(this, { url: this.href,类型：“GET”，数据：[] }); });
@drneel 我今晚将尝试更新 jquery，因为这是我发布的上述评论/错误的问题......

标签： c# javascript jquery asp.net-mvc jquery-select2

【解决方案1】：

我必须升级到 jQuery 2.1（因为版本 1.9 和 .live/.on 函数的问题）才能让我的 select2 开始触发。

现在我只需要设置我的 select2 样式...

【讨论】：