使用 javascript 搜索关注搜索词是什么答案

【问题标题】：Search using javascript focus on what the search word使用 javascript 搜索关注搜索词是什么
【发布时间】：2018-11-30 14:12:12
【问题描述】：

如果难以理解，请见谅。我必须创建一些代码来关注我们想要搜索的单词。我举个例子

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

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

当我选择其中一些时

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

有这方面的示例代码吗？

【问题讨论】：

那么您目前执行所有这些操作的代码在哪里？将其发布在您的问题中
看看 listjs (listjs.com)，它可以满足您的要求
有些hide() 和show() 不工作？
这是作业吗？
如果我选择 ice chocolate 然后用词搜索 tea 会发生什么？ ice chocolate 应该还在吗？如果您验证是否应该将其视为:checked？

标签： javascript php arrays json search

【解决方案1】：

对此我可以想到 2 个解决方案：

1.) 使用自动完成并在自动完成选项中包含复选框。您必须修改并在选项中包含复选框。 This question 可以帮到你。

2.) 将其转换为标签系统，即删除复选框，当您选择任何选项时，将其显示为标签。这样您就可以轻松添加/删除选项。为此，您可以使用Select2。参考链接中的多个选项，你会明白我所指的。

希望这会有所帮助。

【讨论】：

【解决方案2】：

有很多方法可以实现您的目标。

这是一个查看每个复选框的文本并将隐藏或显示它们的示例。按下重置只会清空搜索框并再次按下搜索按钮。

事件监听器只是监听按钮按下的一种方式，然后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>

希望对您有所帮助?

【讨论】：