1.0.0-alpha3版本无jQuery自动完成Chips组件初始化失败

这个TypeError: Cannot read property '0' of null的报错我之前在使用Materialize alpha3版本时也碰到过，本质是该版本对Chips组件的自动完成配置做了细节调整，和alpha2版本的兼容逻辑不一样。

问题根源 #

在1.0.0-alpha2版本中，autocompleteOptions.data允许用null作为键值对的值，但alpha3版本里，这个值必须是字符串类型（空字符串也可以），否则组件初始化时会因为无法读取预期属性而抛出错误。

修改后的可运行代码 #

HTML部分（保持原有结构即可）

<div class="row">
  <div class="col s12 m6">
    Groups:
    <div class="chips chips-autocomplete-groups">
    </div>
  </div>
</div>

JS部分（调整data值为字符串格式）

document.addEventListener('DOMContentLoaded', function() {
  var elem = document.querySelector('.chips-autocomplete-groups');
  if (elem != null) {
    var insChipAC = M.Chips.init(elem, {
      placeholder: 'Enter a group',
      secondaryPlaceholder: '+Group',
      autocompleteOptions: {
        data: {
          'Alex': '',
          'Brandy': '',
          'Charlie': ''
        },
        limit: Infinity,
        minLength: 1
      }
    });
  }
});

额外提示 #

建议把初始化代码放在DOMContentLoaded事件回调里，确保DOM完全加载后再初始化组件，能避免元素未找到这类潜在问题；另外也可以检查下Materialize的CSS和JS资源是否正确引入，alpha3版本的资源路径是否无误。

内容的提问来源于stack exchange，提问作者Marcos Freire