实时搜索，输入了一些JS单词

Question

有这样的实时搜索代码。单击复选框将单词添加到行中。用空格书写必要的单词时，它可以很好地工作并显示其中有一个题写单词的行。如何做到这一点，以便在您单击复选框时可以立即生效，就像您手动键入单词一样？

[code]https://codepen.io/dduckker/pen/VOwmJG

Answer 1

要使用复选框的值更新输入，请在输入处加上空格。

function update() {
  document.getElementById('output').value = 
    [...document.querySelectorAll('#content input:checked +  label')]
      .map(label => label.textContent).join(' ');
}

这有效，但是，输入未获得keyup事件来过滤实际列表：

INPUT.addEventListener('keyup', filterList)

要解决此问题，您需要手动调用filterList以及更改输入后要执行的其他任何操作，也可以手动触发事件。