1

我对 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);
    }

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

编辑：控制台的屏幕截图 控制台错误

4

2 回答 2

2

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

于 2013-06-25T18:43:25.090 回答
0

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

public JsonResult AeroportLookUp()
于 2013-06-25T17:26:13.367 回答