搜索栏在输入每个字母后更新 html 和 javascript

Question

所以我有一个有大量按钮的网站，但我想创建一个搜索栏，在每个字母之后，它将内容与每个按钮的 id 或 alt 进行比较，所以基本上如果我输入“he”，它会显示名称前 2 个字母中包含“he”的所有事物，而不显示其他

有人知道我怎样才能做这样的事情吗？

我尝试制作一个表格，在单击提交按钮时对其进行比较，但我似乎无法弄清楚如何制作它，以便它在每个字母后都会更新，而且我也无法弄清楚如何正确比较它，因为它只是没有更新任何内容：

<input id="Search"></input> <button class="searchItem", id="123">123</button> <button class="searchItem", id="122">122</button> <button class="searchItem", id="213">213</button>

 const SearchBar = document.getElementById("Search");

SearchBar.addEventListener("input", updateValue);

function updateValue(e) {

const searchItems = document.getElementsByClassName("searchItem");
[searchItems].forEach(el => { 
  
  if (el.id.startsWith(e.value)) {
    el.style.display = 'block';
    print('what ok')
  } else {
    el.style.display = 'none';
    print('doesnt work')
  }
 });
};

 

Answer 1

事件回调中的

e

是输入事件对象，但您希望使用

e.target.value

来获取

<input>

的当前值：

function updateValue(e) {
  ...
  if (el.id.startsWith(e.target.value) { 
    ... 
  }
}