如何通过materialize css的autocomplete元素的onselect触发事件
如何通过materialize css的autocomplete元素的onselect触发事件
提问于 2018-07-22 00:33:18
我正在使用materialize css的autocomplete特性。
我能够从输入字段触发服务器调用，并获得JSON数据并显示结果。但是我不能通过onselect自动完成项来触发事件。
我的用户输入代码：
<input placeholder="Search ..." class="autocomplete" type="text" (keyup)="onKey($event)">onKey()获取服务器数据并显示结果，如下所示：
我面临的问题是，当选择任何下拉值时，都会得到选定的值
回答 2
Stack Overflow用户
发布于 2018-07-22 01:00:15
提供onselect处理程序作为options对象的属性onAutocomplete。
const options = {
data: {
"All": null,
"Apple": "https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg",
"Google": "https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg",
"Microsoft": null
},
onAutocomplete: displayResult('autocompleted as')
}
const input = document.querySelector('.autocomplete');
const instances = M.Autocomplete.init(input, options);
const resultContainer = document.querySelector('.result')
function displayResult(state) {
return function(text) {
resultContainer.innerText = "Input " + state + " " + text
}
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<p class="result">Nothing selected in input</p><br>
<div class="input-field col s12">
<input type="text" id="autocomplete-input" class="autocomplete" onchange="displayResult('changed to')(this.value)">
<label for="autocomplete-input">Autocomplete</label>
</div>
Stack Overflow用户
发布于 2018-07-22 01:13:41
您是否尝试过以这种方式添加onAutocomplete函数
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
onAutocomplete: function(val) {
console.log(val);
}
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51458090
复制相关文章
相似问题