Question

我有当前数据

<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属性匹配的内容，然后单击标有 Show Job 的按钮，则包含名称和工作的div元素将显示如下：

Name: ...
Job: ...

Answer 1

这是您可以做的：

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

构建的

如何制作纯JavaScript在线搜索方法？

1 个答案: