3

我正在尝试实现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>
4

1 回答 1

2

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

<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>
于 2013-04-19T22:06:00.470 回答