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

Question

I'm trying to implement the select2 on my master layout of my ASP.NET MVC 4 website.

I want it to, as soon as the user starts typing (minimum of 2 letters), call my method to query the database using the letters the user has already typed. Except, when I start typing, my method never gets called. I threw in some alerts and I'm able to see what I'm typing, but the select2 isn't firing, I think.

Here's the script and css references in the tag:

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

Here's the search box in my layout.cshtml file:

<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>

And here's the bottom of my layout page where the select2 stuff appears:

<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>

Lastly, here's my controller method (I'm not worried about the code here yet, I just want to see my breakpoint get hit at the first line...):

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

Answer 1

I had to upgrade to jQuery 2.1 (because of the issue with version 1.9 and the .live/.on functions) in order for my select2 to start firing.

Now I just need to get my select2 styled...