Materializecss: Is there any event when an item is selected from the autocomplete popup?

Question

I am trying to use autocomplete as a search box so that the search result can be shown in the popup by updating the data as the user types. When the user clicks on an item in the popup he should be navigated to another page. I also want to know if there are any way I can associate an id to the data so that it can be used in the other page.

If autocomplete is not the right candidate, please advice any alternate that materializecss provides.

Answer 1

 
  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      onAutocomplete: function(val) {
      // Callback function when value is autcompleted.
      alert(val)
      
      //Here you then can do whatever you want, val tells you what got clicked so you can push to another page etc...
    },
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          
          <input type="text" id="autocomplete-input" class="autocomplete">
          <label for="autocomplete-input">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

Here, i modified it in, the val tells you what got clicked and you could for example push to a other page and use that value etc. that depends on your usage. Any questions just comment :)