Question

我正在尝试实现此代码here

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

这是我的代码：

查看：

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

Controller（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:。

您使用的是哪个版本的bootstrap？独立插件不再像以前那样支持所有不同的数据提供者

Answer 2

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

像这样：

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

Answer 3

您目前使用的所有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>

希望这会有所帮助;）

Typeahead twitter bootstrap不能正常运行mvc4

3 个答案: