Bootstrap Css Typeahead 不工作 ASP.NET MVC 4答案

【问题标题】：Bootstrap Css Typeahead Not Working ASP.NET MVC 4Bootstrap Css Typeahead 不工作 ASP.NET MVC 4
【发布时间】：2013-06-25 16:35:59
【问题描述】：

我对 twitter bootstrap 的 typeahead 插件有疑问。这是我在 _Layout.cshtml 中的 jquery 和 bootstrap 引用：

 <html lang="en">
        <head>
            <meta charset="utf-8" />

            <title>@ViewBag.Title - My ASP.NET MVC Application</title>
            <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
            @Styles.Render("~/Content/css")
            <link href="@Url.Content("~/Content/themes/base/Bootstrap/bootstrap.css")" rel="stylesheet" type="text/css" />
            @Scripts.Render("~/bundles/modernizr")
            @Scripts.Render("~/bundles/jquery")
            <script src = "@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
            <script src=  "@Url.Content("~/Scripts/Bootstrap/bootstrap.min.js")" type="text/javascript"></script>
            <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
            <script src ="@Url.Content("~/Scripts/Bootstrap/bootstrap-typeahead.js")" type="text/javascript" />
........

这是我使用插件的javascript函数：

<script type="text/javascript">

    $("#searchAeroRetour").typeahead({
        source: function (query, process) {
            var countries = [];
            map = {};

            // This is going to make an HTTP post request to the controller
            return $.post('/AutoComplete/AeroportLookUp', { query: query }, function (data) {

                // Loop through and push to the array
                $.each(data, function (i, country) {
                    map[country.Nom] = country;
                    countries.push(country.Nom);
                });

                // Process the details
                process(countries);
            });
        },
        updater: function (item) {
            var selectedShortCode = map[item].Nom;

            // Set the text to our selected id
            $("#details").text("Selected : " + selectedShortCode);
            return item;
        }
    });

</script>

这是输入：

.....<td>
      <input type="text" id="searchAeroRetour" name ="searchAeroRetour" data-provide="typeahead" placeholder="Aeroport" autocomplete="off" />
      </td>.....

这是由 javascript 函数调用的我的控制器：

public ActionResult AeroportLookUp()
    {
        var aeroports = _aeroRepo.GetAll();
        var compAvs = new List<Aeroport>();
        foreach (var aero in aeroports)
        {
            compAvs.Add(new Aeroport() { Nom = aero.Nom, Id = aero.Id });
        }
        return Json(compAvs, JsonRequestBehavior.AllowGet);
    }

-我在该方法上放置了一个断点，以查看它是否被调用，并且当我在文本框中键入时它根本没有被调用。奇怪的是，昨天同一页面中的许多输入都使用了相同的代码，而今天却没有任何效果。谢谢。

编辑：控制台屏幕截图

【问题讨论】：

标签： jquery asp.net asp.net-mvc-4 twitter-bootstrap bootstrap-typeahead

【解决方案1】：

好的，我想我找到了问题 :) 首先，我引用了两次 typeahead.js 文件，一次在 bootstrap.min.js 中，其中包括自己的 typeahead 插件，一次在我下载的显式文件中.第二个问题是javascript函数的post。我正在处理区域，因此调用操作的最佳方法不是使用 @Url.Content("~ ....") 对 URL 进行硬编码。

【讨论】：

【解决方案2】：

在您的控制器中，您的返回类型是 ActionResult，而您正在返回 Json 值。尝试将您的方法更改为

public JsonResult AeroportLookUp()

【讨论】：

您是否在浏览器中遇到了一些错误，如果没有，您可以从浏览器发布正在呈现的页面的屏幕截图和该页面的源代码吗？
如果您将相同的文件包含两次，则可能会发生这种情况。我今天也发生了同样的事情。