Question

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

我已经剥离了代码，以消除任何奇怪的影响，并像在Materialize网站上一样复制了代码。如所附代码中所示，我可以自动完成以按预期工作，但不能与芯片一起工作。

我尝试使用Chrome和Edge浏览器以及标记和类名的各种组合，但仍然无法使其正常工作。

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

我错过了什么？

<!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：

CXX      cmidiin.o
CXXLD    cmidiin

使用Vanilla JS：

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

您只需设置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。

物化芯片的问题-自动完成

1 个答案: