Question

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

这些是我遇到的错误。

我已经看到一些人在谈论1.0.0的自动完成初始化问题，但是我不确定他们在说什么。

Answer 1

您正在使用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>

希望这会有所帮助。

Materializecss自动完成功能没有出现1.0.0没有jQuery

1 个答案: