Materialize AutoComplete with id

index.html

  <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s13">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete" class="autocomplete" >
          <label for="autocomplete">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>

ID: <p id="key"></p>
<button class="btn" onclick="getId()">Get</button>

materialize-autocomplete-with-id.markdown

Materialize AutoComplete with id

A Pen by Fabian Chinchilla on CodePen.

License.

script.js

$(document).ready(function() {
  $('.modal').modal();
  $('select').material_select();
  $('input.autocomplete').autocomplete2({
    data: [
      {id:1,text:'Apple',img:'http://placehold.it/250x250'},
      {id:2,text:'Microsoft',img:'http://placehold.it/250x250'},
      {id:3,text:'Google',img:'http://placehold.it/250x250'},
    ]
  });
});

  function getId() {
    alert($('#autocomplete').data('id'));
  }





      

scripts

<script src="https://codepen.io/arg3ni5/pen/VPQZwe"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />