javascript - 输入几个 JS 词的实时搜索

Question

有这样的实时搜索代码。单击复选框将单词添加到该行。当用空格书写必要的单词时，它可以正常工作并显示其中有一个刻字的行。如何使它在您单击复选框时立即起作用，就像您手动键入单词时一样？

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

标签： javascripthtml

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 以及在输入更改时想要执行的任何其他操作，要么您可以手动触发事件。