Materialize Autocomplete的onAutocomplete为何返回activeIndex=-1而非选项id？

你遇到的问题是因为onAutocomplete事件的触发时机是在选中项已完成输入、下拉菜单关闭之后，此时组件的activeIndex会被重置为-1，无法通过它获取选中项信息。以下是几种可行的解决方法：

方法一：利用onAutocomplete的回调参数匹配data数组 #

onAutocomplete事件默认会将选中的文本内容作为参数传入回调函数，你可以用这个文本匹配初始化时的data数组，从而拿到对应的id：

<div class="input-field outlined s4" style="margin: 5px 5px;">
  <i class="material-icons prefix">search</i>
  <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete">
  <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const autocompleteData = [
      {id: 3, text: "Name 1"},
      {id: 4, text: "Name 2"}
    ];
    
    var elems = document.querySelectorAll('[id="vincularSetor.colaborador_id.autocomplete"]');
    var instances = M.Autocomplete.init(elems, {
      minLength: 0,
      data: autocompleteData,
      onAutocomplete: (selectedText) => {
        const selectedItem = autocompleteData.find(item => item.text === selectedText);
        if (selectedItem) {
          console.log('选中项id:', selectedItem.id);
        }
      }
    });
  });
</script>

方法二：监听下拉选项的点击事件 #

直接给Autocomplete生成的下拉选项绑定点击事件，在点击时直接获取对应的id值：

<div class="input-field outlined s4" style="margin: 5px 5px;">
  <i class="material-icons prefix">search</i>
  <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete">
  <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const autocompleteData = [
      {id: 3, text: "Name 1"},
      {id: 4, text: "Name 2"}
    ];
    
    var elems = document.querySelectorAll('[id="vincularSetor.colaborador_id.autocomplete"]');
    var instances = M.Autocomplete.init(elems, {
      minLength: 0,
      data: autocompleteData,
      onOpen: function() {
        const dropdownItems = this.dropdownEl.querySelectorAll('.autocomplete-content li');
        dropdownItems.forEach((item, index) => {
          item.addEventListener('click', () => {
            console.log('选中项id:', autocompleteData[index].id);
          });
        });
      }
    });
  });
</script>

方法三：使用组件的selectedItem属性 #

在onAutocomplete事件中直接访问组件的selectedItem属性获取选中文本，再匹配对应的id：

<div class="input-field outlined s4" style="margin: 5px 5px;">
  <i class="material-icons prefix">search</i>
  <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete">
  <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const autocompleteData = [
      {id: 3, text: "Name 1"},
      {id: 4, text: "Name 2"}
    ];
    
    var elems = document.querySelectorAll('[id="vincularSetor.colaborador_id.autocomplete"]');
    var instances = M.Autocomplete.init(elems, {
      minLength: 0,
      data: autocompleteData,
      onAutocomplete: function() {
        const selectedText = this.selectedItem;
        const selectedItem = autocompleteData.find(item => item.text === selectedText);
        if (selectedItem) {
          console.log('选中项id:', selectedItem.id);
        }
      }
    });
  });
</script>

注意：不同版本的Materialize Autocomplete API可能略有差异，以上方案基于官方标准实现。

内容的提问来源于stack exchange，提问作者Ygor Montenegro