如何通过实现CSS的自动完成元素的onselect触发事件 [英] How can I trigger an event by onselect of autocomplete element of materialize css

问题描述

我正在使用实现CSS的

我面临的问题是在选择任何下拉值以获得所选值时

解决方案

为onselect处理程序提供options对象的属性 onAutocomplete .

  const options = {数据: {全部":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('自动完成为')}const input = document.querySelector('.autocomplete');const实例= M.Autocomplete.init(输入，选项);const resultContainer = document.querySelector('.result')函数displayResult(state){返回函数(文本){resultContainer.innerText =输入" +状态+" +文字}}  

 < 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">在输入</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>  

I am using autocomplete feature of materialize css.

I am able to trigger a server call from the input field and getting the JSON data and able to display the result. But I am not able to trigger event by onselect of the autocomplete item.

My code for user input:

<input placeholder="Search ..." class="autocomplete" type="text" (keyup)="onKey($event)">

The onKey() getting the server data and displaying the result as below:

The problem i am facing is while on select of any drop down value to get the selected value

解决方案

Provide your onselect handler as the property onAutocomplete of the options object.

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>

这篇关于如何通过实现CSS的自动完成元素的onselect触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！