javascript - 如何制作纯JavaScript实时搜索方法？

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        2年前关闭。
                    
                
        

我有当前数据

<data name="John" job="officer"></data>
<data name="Michael" job="teacher"></data>
<data name="Tommy" job="artist"></data
<data name="Arnold" job="doctor"></data>

并持续多达100条线。
如何仅使用HTML和纯Javascript创建实时搜索输入表单？

例如，如果有人键入与name属性匹配的内容，然后单击标有“显示作业”的按钮，则显示包含名称和作业的div元素，如下所示：

Name: ...
Job: ...

最佳答案

您可以执行以下操作：

let result = document.getElementById("result")
let name = document.getElementById("name")

name.onkeyup = () => {
  let data = document.querySelectorAll(`data[name="${name.value}"]`)
  if (data.length) {
    result.textContent = Array.from(data).map(i => `${name.value} is a ${i.getAttribute("job")}`).join(", another ")
  } else {
    result.textContent = `No "${name.value}" found`
  }
}

<data name="John" job="officer"></data><data name="John" job="teacher"></data>
<data name="Michael" job="teacher"></data>
<data name="Tommy" job="artist"></data>
<data name="Arnold" job="doctor"></data>
<input id="name">
<div id="result"></div>

我更喜欢将数据存储为JS对象或使用dataset，因为<data> tag似乎没有此作用



注意：字符串是使用template literals构建的