CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-3typeahead.js
NealR
NealR

Reputation: 10709

jQuery - Uncaught TypeError: Object [object Object] has no method 'typeahead'

I am trying to implement the typeahead autocomplete search feature but having no luck. I am about two weeks new to jQuery, so I am not really sure which direction to go. Here is the error I am receiving in Chrome's debugger when the page loads

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

This refers to the first line inside this block of code after the declarations

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

The typeahead feature is being used inside a search bar with the following code. FYI - the <ul class="nav"> tag that is truncated simply contains a large number of <li> elements. Just shortened it for readability. 

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

EDIT

I've also tried the following two declarations, plus any number of combinations of the three (i.e. the http link) and receive the same error

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

SECOND EDIT

Changed the jQuery version and typeahead file to the following and am still getting the same error...

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

Upvotes: 3

Views: 8508

Answers (1)

NealR
NealR

Reputation: 10709

I don't know what the cause of this problem was still, but these declarations solved it. I'll leave this question unanswered for awhile in case someone sees the problem. 

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

Upvotes: 2

Related Questions