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