Materializecss Автозаполнение Нет элементов Появление 1.0.0 Нет jQuery - PullRequest
Новая
       0

Materializecss Автозаполнение Нет элементов Появление 1.0.0 Нет jQuery

0 голосов
/ 06 октября 2018

Я не очень разбираюсь в 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>

Это ошибки, которые я получаю.Error

Я видел, как некоторые люди говорили о проблеме с инициализацией автозаполнения 1.0.0, но я не уверен во всем, о чем они говорят.

1 Ответ

0 голосов
/ 06 октября 2018

вы используете библиотеку 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>

Надеюсь, это поможет.

...