如何通过物化 css 的自动完成元素的 onselect 触发事件答案

【问题标题】：How can I trigger an event by onselect of autocomplete element of materialize css如何通过物化 css 的自动完成元素的 onselect 触发事件
【发布时间】：2018-07-22 02:10:10
【问题描述】：

我正在使用 autocomplete 实现 css 的功能。

我能够从输入字段触发服务器调用并获取 JSON 数据并能够显示结果。但我无法通过自动完成项的 onselect 触发事件。

我的用户输入代码：

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

onKey() 获取服务器数据并显示结果如下：

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

【问题讨论】：

请包含您正在使用但无法正常工作的代码。链接到另一个站点来描述您正在尝试做的事情是不受欢迎的，因为这些链接可能会过期。这也意味着您的问题不包含在其自身中，这使您将来更难帮助其他人。

标签： javascript angular materialize

【解决方案1】：

提供您的 onselect 处理程序作为选项对象的属性 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>

【讨论】：

【解决方案2】：

你有没有试过以这种方式添加 onAutocomplete 功能

$('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      onAutocomplete: function(val) {
          console.log(val);
      }
    });

【讨论】：