Materialize: Materializecss Autocomplete open is not a function (version 1.0.0-beta)

Created on 15 May 2018 · 2Comments · Source: Dogfalo/materialize

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->

      <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>


         <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">


var elems = document.querySelector('.autocomplete');
    var instances = M.Autocomplete.init(elems);

    instances.updateData({
  "Apple": null,
  "Microsoft": null,
  "Google": 'https://placehold.it/250x250'
});

    instances.open();

  </script>
    </body>
  </html>

I am getting the follow error.

TypeError: instances.open is not a function

Source

bharathirajatut

Most helpful comment

Your instances is an array of objects, so you would have to use instances[0].open(); to access the first instance or get a specific instance with var instance = M.Autocomplete.getInstance(elem);.

However, I think that you need v1.0.0-rc.1 to have the .open() and .close() methods. Here is a CodePen using v1.0.0-rc.1.

alexwbaumann on 15 May 2018

❤3 👍1

All 2 comments

However, I think that you need v1.0.0-rc.1 to have the .open() and .close() methods. Here is a CodePen using v1.0.0-rc.1.

alexwbaumann on 15 May 2018

❤3 👍1

Thanks alexwbaumann.

Finally the error occured due to the versions. I just used the css and js from the official get started page. That is the problem.

And i just posting the working css and js below.

  <!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/js/materialize.js"></script>

bharathirajatut on 15 May 2018

Was this page helpful?

0 / 5 - 0 ratings