json - Typeahead twitter bootstrap无法正常运行mvc4

Question

我正在尝试在这里实现此代码

但我在运行项目时没有得到任何结果。

这是我的代码：

看法：

<input type="text" name="names" value="" id="typeahead" data-provide="typeahead"                autocomplete="off"  />

再次查看（index.cshtml）：

<script type="text/javascript">
    $(function () {
        $('#typeahead').typeahead({
            source: function (term, process) {
                var url = '@Url.Content("~/index/GetNames")';

                return $.getJSON(url, { term: term }, function (data) {
                    return process(data);
                });
            }
        });
    })
</script>

控制器（indexController.cs）：

[HttpGet]
public JsonResult GetNames(string term)
{
    // A list of names to mimic results from a database
    List<string> nameList = new List<string>
    {
        "Jonathan", "Lisa", "Jordan", "Tyler", "Susan", "Brandon", "Clayton", "Elizabeth", "Jennifer", "Hadi"
    };

    var results = nameList.Where(n =>
        n.StartsWith(term, StringComparison.OrdinalIgnoreCase));

    return new JsonResult()
    {
         Data = results.ToArray(),
         JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}

这里也是在视图页面末尾添加的 js 脚本：

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

这也是我在运行时遇到的错误列表：

• Uncaught TypeError: undefined is not a function bootstrap.js:29
• Uncaught ReferenceError: intellisense is not defined jquery-1.9.1.intellisense.js:1
• Uncaught TypeError: Object [object Object] has no method 'typeahead'

请让我知道我做错了什么！

Answer 1

这可能有点旧，但你不能使用source:你必须使用remote:, prefetch:, 或local:错误读取。

您使用的是哪个版本的引导程序？独立插件不再像旧插件那样支持所有不同的数据提供者

Answer 2

您目前使用的所有 JS 库都有一个依赖项：jQuery因此需要按正确的顺序加载它们：

<!-- jQuery should always be the first -->
<!-- jquery-1.9.1.js and jquery-1.9.1.min.js are the same but .min version is minified and always lighter, so use it for faster page load -->
<script src="~/Scripts/jquery-1.9.1.min.js"></script>

<!-- Any other library should be loaded after jQuery -->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery-1.9.1.intellisense.js"></script>

希望这可以帮助 ;）

Answer 3

首先，确保在引导之前先放置引用 jquery 的脚本标记。也只加载一个 jquery script 标签。

像这样：

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