Materializecss Autocomplete Нет элементов, появляющихся 1.0.0 Нет jQuery

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

Это ошибки, которые я получаю. Materializecss Autocomplete Нет элементов, появляющихся 1.0.0 Нет jQuery

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

javascript jquery materialize

06.10.2018 03:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

402

Ответы 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>

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

Есть ли способ сделать это без jQuery?

— 06.10.2018 19:42

06.10.2018 05:49