Materialise 芯片自动完成的问题

Question

我一直在尝试让芯片自动完成作为项目的一部分工作。

我已经剥离了代码，以删除任何奇怪的效果，并复制了 Materialise 网站上的代码。正如在附加代码中一样，我可以让自动完成按预期工作，但不能使用芯片。

我已经尝试使用 Chrome 和 Edge 浏览器以及标签和 class 名称的各种组合，但仍然无法正常工作。

所以现在我需要一些帮助！

我错过了什么？

<!DOCTYPE html>
  <html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container" >
<!-- autocomplete from materialize web site -->
     <div class="row">
        <div class="col s12">
            <div class="input-field col s6">
              <i class="material-icons prefix">textsms</i>
              <input type="text" id="autocomplete-input" class="autocomplete">
              <label for="autocomplete-input">from materialize web site</label>
            </div>
        </div>
      </div>
  
  
<!-- chip autocomplete from materialize web site -->  
    <div class="row">
        <div class="col s6">
            <div id="chips-autocomplete" class="chips chips-autocomplete " ></div>
        </div>
    </div> 
</div>  <!-- container end -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script>        
        document.addEventListener('DOMContentLoaded', function() {
                options={"data": {"abel":null,"baker":null,"charlie":null},
                         "placeholder":'fred'}
        console.log (options) 
        var autoElems = document.querySelectorAll('.autocomplete');
        var attemptElems = document.getElementById("attempt");
        var chipsElems = document.getElementById("chips-autocomplete");

        var auto = M.Autocomplete.init(autoElems, options);
        var chips = M.Chips.init(chipsElems, options);
        });
    </script>
</body>
</html>

Answer 1

芯片自动完成的数据初始化不正确。来自 docs:

  $('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });

使用 Vanilla JS：

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.chips-autocomplete');
    var instances = M.Chips.init(elems, {
        autocompleteOptions: {
          data: {
            'Apple': null,
            'Microsoft': null,
            'Google': null
          },
          limit: Infinity,
          minLength: 1
        }
      });
  });

你只是设置 data（在引号中，当没有引号时）。应该是autocompleteOptions作为一个对象，然后在里面data.

Materialise 芯片自动完成的问题

Problem with Materialize chips-autocomplete

materialize