Javascript Materializecss自动完成无元素出现1.0.0无jQuery_Javascript_Jquery_Materialize

Javascript Materializecss自动完成无元素出现1.0.0无jQuery

javascript jquery

Javascript Materializecss自动完成无元素出现1.0.0无jQuery,javascript,jquery,materialize,Javascript,Jquery,Materialize,我对javascript、jquery、ajax等方面不是很有经验。我在版本0.100.2方面取得了一些成功，但我想我会尝试让不依赖jquery的版本正常工作。我已经完全尝试了文档中所说的内容。以下是整个页面： <html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link type="text/css"

我对javascript、jquery、ajax等方面不是很有经验。我在版本0.100.2方面取得了一些成功，但我想我会尝试让不依赖jquery的版本正常工作。我已经完全尝试了文档中所说的内容。以下是整个页面：

<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
<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>
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.autocomplete');
    var instances = M.Autocomplete.init(elems, options);
  });


  // Or with jQuery

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });
    </script>
    <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
    </html>


短信
自动完成
document.addEventListener（'DOMContentLoaded'，function（）{
var elems=document.querySelectorAll（'.autocomplete'）；
var instances=M.Autocomplete.init（元素、选项）；
});
//或者使用jQuery
$（文档）.ready（函数（）{
$（'input.autocomplete'）.autocomplete({
数据：{
“苹果”：空，
“Microsoft”：空，
“谷歌”：https://placehold.it/250x250'
},
});
});

这些都是我得到的错误

我见过一些人谈论1.0.0的自动完成初始化问题，但我不确定他们所谈论的全部内容

您正在使用jQuery库，而不导入脚本文件，
入门示例中也提到，
使用

Vanilla Javascript

或

jQuery

，并相应地使用代码片段

<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
</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>

  <!-- Scripts -->
  <!-- jQuery script file, this imports the jQuery library in your project -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/materialize.min.js"></script>
  <script>
    $(document).ready(function() {
      // this options Object, can be improved to be received 
      // from your RESTful API in the future
      var options = {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      };

      $('input.autocomplete').autocomplete({ data: options });
    });
  </script>
</body>
</html>


短信
自动完成
$（文档）.ready（函数（）{
//此选项对象，可以改进为接收
//将来从RESTful API
变量选项={
“苹果”：空，
“Microsoft”：空，
“谷歌”：https://placehold.it/250x250'
};
$（'input.autocomplete'）.autocomplete（{data:options}）；
});

希望这能有所帮助。

没有jQuery，有什么方法可以做到这一点吗？