我正在尝试使用materialize自动完成元素 我正确检索了自动完成元素,但在我输入句子开头时它们不会出现: 似乎数据已加载,但是当我尝试刷新实例(例如instance.open)时失败。 我怎么能处理它? 问候
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete" onkeypress="valueChange(this);">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.autocomplete');
var instances = M.Autocomplete.init(elems, {});
});
function valueChange(elem) {
var instance = M.Autocomplete.getInstance(elem);
console.log("search for " + elem.value);
axios.post("<%= test_autocomplete_search_path %>", {
search: elem.value,
authenticity_token: '<%= form_authenticity_token %>',
})
.then(function (response) {
var map = new Object();
for (bcl = 0; bcl < response.data.length; bcl ++) {
map[response.data[bcl].town] = null;
}
if (response.data.length > 0) {
console.log(map);
instance.updateData(map);
instance.open(); FAIL HERE
}
})
.catch(function (error) {
alert(error);
});
};
</script>