Uncaught TypeError: this.dropdownEl is null 初始化物化自动完成时

Question

I use Materialize v1 and its autocomplete. I used it before. I reused the code but I am getting Uncaught TypeError: this.dropdownEl is null , I did not find anything useful on the net regarding this error. I tried to simplify the initialization and debug but nothing work.

hm, Chrome throws this error Uncaught TypeError: Cannot set property 'tabIndex' of null

Uncaught TypeError: this.dropdownEl is null
value https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
n https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
value https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
value https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
value https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
s https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
value https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
value https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js:6
setAutocomplete https://n-mh3s4ggu24p7gzei6l4cpyqn5d5354dk4egvm7y-0lu-script.googleusercontent.com/userCodeAppPanel:159
cf https://n-mh3s4ggu24p7gzei6l4cpyqn5d5354dk4egvm7y-0lu-script.googleusercontent.com/static/macros/client/js/3342396747-mae_html_user_bin_i18n_mae_html_user__cs.js:73 

I call Google application script that returns autocomplete data

document.addEventListener("DOMContentLoaded", function(){  
  google.script.run.withSuccessHandler(setAutocomplete)
                .getAutocompleteData(); 
});

and then I set the autocomplete

  function setAutocomplete(vraceno){

    console.log(vraceno);       
    var elems = document.querySelectorAll('.autocomplete');

    console.log(elems.length)
    console.log(elems[0].id)

    var       data = {
        "Apple": null,
        "Microsoft": null,
        "Google": "https://placehold.it/250x250"
    }

    var options = {
          //data : vraceno.autocomplete, 
          data : data,
          limit : 2,
          // onAutocomplete : function(txt) {
          //    onAutocomplete(txt);
          //  },
    };

   console.log("before");       

   var instanceAutocomplete = M.Autocomplete.init(elems, options);
   console.log("after");       
   console.log(instanceAutocomplete)  
    //autocomplete = vraceno;
  }

and from the console screenshot we can see that

• the data was received (it does not matter as I crated test data variable to test the data received)
• there is one "autocomplete" element found
• the var instanceAutocomplete = M.Autocomplete.init(elems, options); is the issue

The HTML used is

<div class="col s12 m6 l3">
  <label for="autocomplete">vyhledávání podle jména, příjmení, id</label>
  <input placeholder="" id="auto" name="autocomplete" type="text" class="autocomplete" autocomplete="off" />
</div>

Someone could help me to make the Materialize autocomplete to work?

Answer 1

The problem happened because the input field was not wrapped inside a div with the class input-field:

<div class="col s12 m6 l3">
  <label for="autocomplete">vyhledávání podle jména, příjmení, id</label>
  <input placeholder="" id="auto" name="autocomplete" type="text" class="autocomplete" autocomplete="off" />
</div>

Adding a div with the class "input-field" solved this problem.