Skip to content

Instantly share code, notes, and snippets.

@equivalent
Forked from phoebebright/index.html
Created September 28, 2020 15:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save equivalent/2a18a96b99f2dc2eec81d890f2efc5ee to your computer and use it in GitHub Desktop.
Save equivalent/2a18a96b99f2dc2eec81d890f2efc5ee to your computer and use it in GitHub Desktop.
Materialize AutoComplete with id
<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>
$(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'));
}
<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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment