Materialize – activeIndex returns -1

April 19, 2024

After reading the autocomplete documentation here, why on onAutocomplete it always log within the console the value -1 and not de id from the chosen option in data array?

    <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() {
        var elems = document.querySelectorAll('[id="vincularSetor.colaborador_id.autocomplete"]');
        var instances = M.Autocomplete.init(elems, {
          // specify options here
          minLength: 0, // shows instantly
          data: [
            {id: 3, text: "Name 1"},
            {id: 4, text: "Name 2"}
          ],
          onAutocomplete: () => {
            autocomplete = M.Autocomplete.getInstance(document.getElementById("vincularSetor.colaborador_id.autocomplete"));
            console.log(autocomplete.activeIndex);
          }
        });
      });
    </script>

>Solution :

activeIndex is only used whenever the autocomplete dropdown is open and user is selecting the options using keyboard up/down button.

In order to find out the selected item, you can read from the first argument of the onAutocomplete instead.

Demo:

document.addEventListener('DOMContentLoaded', function() {
  var elem = document.getElementById('vincularSetor.colaborador_id.autocomplete');
  M.Autocomplete.init(elem, {
    minLength: 0,
    data: [{
        id: 3,
        text: "Name 1"
      },
      {
        id: 4,
        text: "Name 2"
      }
    ],
    onAutocomplete: (selectedItems) => {
      console.log(selectedItems);
    }
  });
});

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/css/materialize.min.css">
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.0.3-alpha/dist/js/materialize.min.js"></script>
<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>