I have a problem with Materialize's autocomplete form. I'am using it within a card. But the options are not shown instantly. For example, while typing a 'G' the autocomplete form should suggest 'Google'. But it doesn't. Only by mouseclicking on the form the autocomplete options are shown. But I can not locate a mistake.
HTML (there is just one autocomplete form on this page):
<div id="referenceSetCard" class="row">>
<div class="col s12 m4 l4 offset-m4 offset-l4">
<div class="card over-all">
<!-- Title -->
<div class="card-action red darken-4 white-text">
<h4>Header</h4>
</div>
<!-- Content -->
<div class="card-content">
<p>Text</p>
<!-- Input field -->
<div class="form-field">
<div class="input-field">
<input id="referenceDataInput" type="text" class="autocomplete">
<label for="referenceDataInput">Autocomplete</label>
</div>
</div>
<!-- Buttons -->
<div class="card-action">
<a id="buttonConfirm" class="waves-effect waves-light btn red hide-on-med-and-down">
Confirm
</a>
<a id="buttonCancel" class="waves-effect waves-light btn red hide-on-med-and-down">
Cancel
</a>
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function () {
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
Just have a look:
Please use these new versions of cdnjs or minified scripts.
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
You can also change the value of minLength like when you want autocomplete dropdown to popup.