Autocomplete not working (mdb_autocomplete is not a function

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Autocomplete not working (mdb_autocomplete is not a function)

Jake Benyon pro asked 8 years ago

Hi, I've just downloaded MDB and am trying to get the autocomplete example to work, however I'm getting the following error: TypeError: $(...).mdb_autocomplete is not a function The code I'm using is: 
<div class="md-form">
    <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete">
    <button class="mdb-autocomplete-clear">
        <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            <path d="M0 0h24v24H0z" fill="none" />
        </svg>
    </button>
    <label for="form-autocomplete" class="active">What is your favorite US state?</label>
</div>

<script type="text/javascript">
var states = [
      "Alabana",
      "Alaska",
      "Arizona",
      "Arkansas",
      "California",
];

$('.mdb-autocomplete').mdb_autocomplete({
      data: states
});
</script>
Searching through the JS file, there is no reference to mdb_autocomplete at all. Any help would be much appreciated.

Magdalena Obalska answered 8 years ago

Hi, everything is fine with the code, but our autocomplete is a premium component - it won't work without MDB Pro.

Jake Benyon pro answered 8 years ago

Thanks Magdalena, I notice the Premium Component tag has been added on the Inputs page now. It wasn't there yesterday, hence the confusion! Looks like I'll be going Pro then! :) Thanks again.

Magdalena Obalska answered 8 years ago

Have fun, Jake. :)

TEY pro answered 7 years ago

I have the same problem and buyed the PRO version. <body> <!-- Start your project here--> <div style="height: 100vh"> <div class="flex-center flex-column"> <div class="md-form"> <input type="search" id="form-autocomplete" class="form-control mdb-autocomplete"> <button class="mdb-autocomplete-clear"> <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"> <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /> <path d="M0 0h24v24H0z" fill="none" /> </svg> </button> <label for="form-autocomplete" class="active">What is your favorite US state?</label> </div> </div> </div> <!-- /Start your project here--> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> var states = [ "Alabana", "Alaska", "Arizona", "Arkansas", "California", ... ]; $('.mdb-autocomplete').mdb_autocomplete({ data: states }); </script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> </body>

Jake Benyon pro commented 7 years ago

You're trying to use the function before the script has been loaded - try putting: $(‘.mdb-autocomplete’).mdb_autocomplete({ data: states }); into a $(document).ready() function.

Magdalena Obalska commented 7 years ago

Thanks for your answer, Jake. TEY, try to use Jake's solution.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Jake Benyon
Pro User
10Support score
1Questions 1Answers
0Snippets likes 0Snippets