3

typeaheadオートコンプリート検索機能を実装しようとしていますが、うまくいきません。jQuery を使い始めてから 2 週間が経ちました。ページの読み込み時に 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また、次の 2 つの宣言に加えて、3 つの任意の数の組み合わせ (つまり、リンク) を試しましたが、同じエラーが発生します。

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

2回目の編集

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 に答える