Uncaught TypeError: this.dropdownEl is null 初始化物化自動完成時

Question

我使用 Materialize v1 及其自動完成功能。 我以前用過。 我重用了代碼，但我得到了Uncaught TypeError: this.dropdownEl is null ，我在網上沒有找到任何關於這個錯誤的有用信息。 我試圖簡化初始化和調試，但沒有任何效果。

嗯，Chrome 拋出此錯誤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 

我調用返回自動完成數據的 Google 應用程序腳本

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

然后我設置自動完成

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

並從控制台截圖 我們可以看到

• 接收到數據（沒關系，因為我創建了測試數據變量來測試接收到的數據）
• 找到一個“自動完成”元素
• var instanceAutocomplete = M.Autocomplete.init(elems, options); 是問題

使用的 HTML 是

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

有人可以幫助我使 Materialize 自動完成功能正常工作嗎？

Answer 1

問題的發生是因為輸入字段未包含在帶有 class 輸入字段的 div 中：

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

添加一個帶有 class “輸入字段”的 div 解決了這個問題。