jQuery - 未捕获的类型错误：对象 [对象对象] 没有方法 'typeahead'

Question

我正在尝试实现typeahead 自动完成搜索功能，但没有运气。我刚接触 jQuery 大约两个星期，所以我不确定该往哪个方向发展。这是页面加载时我在 Chrome 的调试器中收到的错误

Uncaught TypeError: Object [object Object] has no method 'typeahead' ... BankListMaster:17

这指的是这段代码中声明后的第一行

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#typeahead').typeahead({
            source: function (term, process) {
                var url = '@Url.Content("~/Home/GetNames")';

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

typeahead 功能正在搜索栏中使用以下代码。仅供参考 - 被截断的 <ul class="nav"> 标记仅包含大量 <li> 元素。只是为了可读性而缩短了它。

        <div class="navbar navbar-fixed-top">  
          <div class="navbar-inner">  
            <div class="container">  
            <ul class="nav"> ... </ul>  
        <ul class="nav"> 
        </ul>  
            <form class="navbar-search pull-left">  
              <input type="text" value="" id="typeahead" data-provide="typeahead" class="search-query" /> @*placeholder=" Agent search" />*@  
            </form>  
        <ul class="nav pull-right">  
          <li>@Html.MenuLink("Help", "About", "Home")</li>  
        </ul>  
            </div>  
          </div>  
        </div>
          <li>@Html.MenuLink("Help", "About", "Home")</li>  
        </ul>  
            </div>  
          </div>  
        </div>  
        <script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/bootstrap-dropdown.js")" type="text/javascript"></script>
        <script type="text/javascript">
            (function () {
                var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                po.src = 'https://apis.google.com/js/plusone.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
            })();  
        </script>

编辑

我还尝试了以下两个声明，加上这三个声明的任意数量的组合（即http 链接）并收到相同的错误

<script src="@Url.Content("~/Scripts/typeahead.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/typeahead.min.js")" type="text/javascript"></script>

第二次编辑

将 jQuery 版本和 typeahead 文件更改为以下内容，但仍然出现相同的错误...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/bootstrap-typeahead.js")"></script>

Answer 1

我不知道这个问题的原因仍然是什么，但这些声明解决了它。如果有人看到这个问题，我会暂时不回答这个问题。

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="http://blattchat.com/demos/typeahead/js/bootstrap-typeahead.js"></script>