CODEWITHSUNDEEP
jqueryjson
user3800243
user3800243

Reputation: 23

TypeError: $(...).predictiveSearch is not a function

I am trying to use a plugin named predictiveSearch for the type-ahead functionality, but I get the error:

TypeError: $(...).predictiveSearch is not a function

I tried re-ordering the loading of scripts but still not working. Can someone please help. Here is the code.

<head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="../js/bootstrap.min.js" type="text/javascript"></script> 
    <script src="../js/predictiveSearch.js" type="text/javascript"></script>
    <script src="../js/jquery.predictive-search.js" type="text/javascript"></script>
</head>

<body>
    <form class="navbar-form navbar-right" role="search"  method="post" action="">
        <input type="text" placeholder="Search" class="form-control predictive-search" autocomplete="off" data-module="predictive-search" data-url="../json/predictiveSearchResults.json">
       <!-- form elements... -->
    </form>
</body>

predictiveSearch.js contains the following code:

$(function(){
    $('[data-module="predictive-search"]').predictiveSearch();
});

Upvotes: 0

Views: 87

Answers (2)

user3800243
user3800243

Reputation: 23

using jquery.noconflict(); helped resolving the error

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337691

You need to include the JS file containing the plugin before the JS file that initialises the plugin. Change your <script> elements to this order:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>  
<script src="../js/jquery.predictive-search.js" type="text/javascript"></script>
<script src="../js/predictiveSearch.js" type="text/javascript"></script>

Upvotes: 2

Related Questions