使用javascript进行搜索时，重点放在搜索词上

Question

抱歉，如果很难理解。我必须创建一些代码来关注我们想要搜索的单词。我给你例子

1. 请说一下，当我们进入页面时。该复选框来自数据库表“ drinks”

1. 然后当我在搜索区域中插入单词时。它将聚焦并消除该复选框

1. 当我选择其中一些时

，然后按重置键。它将显示所有复选框，但所选的复选框不会消失。

是否有示例代码？

Answer 1

为此，我可以想到2种解决方案：

1。）使用自动完成功能，并在自动完成选项中包含复选框。您必须修改该复选框并将其包括在选项中。 This question可以帮助您。

2。）将其转换为标签系统，即删除复选框，并在选择任何选项时将其显示为标签。这样，您可以轻松添加/删除选项。为此，您可以使用Select2。引用链接中的“ multiple”选项，您将得到我所指的内容。

希望这会有所帮助。

Answer 2

有很多方法可以实现您想要的。

这里是一个示例，该示例查看每个复选框的文本，并将其隐藏或显示。按reset只会清空搜索框，然后再次按搜索按钮。

事件侦听器只是侦听按钮按下的一种方式，然后dispatchEvent只是在伪造按钮按下。

如果有任何令人困惑的地方，请随时询问。

const popSearch = document.querySelector('.pop_search');
const popSearchInput = popSearch.querySelector('.input');
const popSearchSearch = popSearch.querySelector('.search');
const popSearchReset = popSearch.querySelector('.reset');
const filterList = document.querySelector('.filter_list');

popSearchSearch.addEventListener('click', () => {
  for (let item of filterList.querySelectorAll('li')) {
    if (item.textContent.includes(popSearchInput.value)) {
      item.removeAttribute('hidden')
    } else {
      item.setAttribute('hidden', '')
    }
  }
});

popSearchReset.addEventListener('click', () => {
  popSearchInput.value = "";
  popSearchSearch.dispatchEvent(new Event('click'))
});

ul.filter_list {
  list-style-type: none;
}

<p class="pop_search">
  <input class="input" placeholder="Search" />
  <button class="search">Search</button>
  <button class="reset">Reset</button>
</p>

<ul class="filter_list">
  <li><label><input type="checkbox" />ice tea</label></li>
  <li><label><input type="checkbox" />ice lemon tea</label></li>
  <li><label><input type="checkbox" />ice coffee</label></li>
  <li><label><input type="checkbox" />bubble tea</label></li>
  <li><label><input type="checkbox" />milk tea</label></li>
  <li><label><input type="checkbox" />hot chocolate</label></li>
  <li><label><input type="checkbox" />ice chocolate</label></li>
</ul>

希望您对此有帮助