How Can I Trigger An Event By Onselect Of Autocomplete Element Of Materialize Css

I am using autocomplete feature of materialize css. I am able to trigger a server call from the input field and getting the JSON data and able to display the result. But I am not a

Solution 1:

Provide your onselect handler as the property onAutocomplete of the options object.

const options = {
  data: {
    "All": null,
    "Apple": "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
    "Google": "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg",
    "Microsoft": null
  },
  onAutocomplete: displayResult('autocompleted as')
}
const input = document.querySelector('.autocomplete');
const instances = M.Autocomplete.init(input, options);
const resultContainer = document.querySelector('.result')

functiondisplayResult(state) {
  returnfunction(text) {
    resultContainer.innerText = "Input " + state + " " + text
  }
}

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script><pclass="result">Nothing selected in input</p><br><divclass="input-field col s12"><inputtype="text"id="autocomplete-input"class="autocomplete"onchange="displayResult('changed to')(this.value)"><labelfor="autocomplete-input">Autocomplete</label></div>

Solution 2:

have you tried by adding onAutocomplete function in this way

$('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      onAutocomplete: function(val) {
          console.log(val);
      }
    });