Autocomplete not working (mdb_autocomplete is not a function

Topic: Autocomplete not working (mdb_autocomplete is not a function)

Jake Benyon pro asked 7 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.

Add comment

TEY pro answered 7 years ago

0 0 Best answer

I have the same problem and buyed the PRO version.

<body>

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

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

<script type="text/javascript" src="js/popper.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/mdb.min.js"></script>
</body>

Please insert min. 20 characters.

I have the same problem and buyed the PRO version. <body>  <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>    <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>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <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 free commented 7 years ago

Thanks for your answer, Jake. TEY, try to use Jake's solution.

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

Have fun, Jake. :)

Add comment

Jake Benyon pro answered 7 years ago

0 0 Best answer

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.

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

Jake Benyon

Pro User 10Support score
1Questions 1Answers 0Snippets