如何从 html 的搜索栏中搜索 json 文件？

Question

我正在做一个项目，该项目需要在网站上使用搜索栏来搜索（希望是）JSON 文件。它不一定是 json，但它需要能够存储有关对象的其他信息。这就是我现在拥有的，

function search_animal() {
    let input = document.getElementById('searchbar').value
    input=input.toLowerCase();
    let x = document.getElementsByClassName('room');
    
  //input = the input in the search bar
  //x = the list of elements
  
    for (i = 0; i < x.length; i++) {
        if (!x[i].innerHTML.toLowerCase().includes(input)) {
            x[i].style.display="none";
      
        }
    
        else {
            x[i].style.display="list-item";             
        }
    }
}

<input id="searchbar" onkeyup="search_animal()" type="text"
        name="search">

我不知道如何在键入时弹出结果，以及如何显示除名称之外具有其他特征的对象

Answer 1

假设你有一个真实的 JSON（字符串化），这个 json 数组的每个对象代表一种动物。

首先，我们将 JSON 解析为带有 JSON.parse() 的 javascript 对象数组

现在，您的搜索功能对于您的用例来说几乎是完美的，但由于您的示例没有显示 .room 是什么，我只是创建了一个 HTML <ul> 来保存动态创建的列表项。

在for 中，获取每个对象并验证名称是否包含正在搜索的内容。如果是，请创建一个 <li> 并向其中添加任何内容/HTML，然后将此新列表项附加到您的 <ul>

看看下面的代码是否和你需要的相似

let jsonData = `[
  {"Name": "Lion", "Color": "Yellow"},
  {"Name": "Monkey", "Color": "Orange"},
  {"Name": "Fish", "Color": "Blue"},
  {"Name": "Cat", "Color": "Black"}
]`

let data = JSON.parse(jsonData)

function search_animal() {
  let input = document.getElementById('searchbar').value
  input = input.toLowerCase();
  let x = document.querySelector('#list-holder');
  x.innerHTML = ""

  for (i = 0; i < data.length; i++) {
    let obj = data[i];

    if (obj.Name.toLowerCase().includes(input)) {
      const elem = document.createElement("li")
      elem.innerHTML = `${obj.Name} - ${obj.Color}`
      x.appendChild(elem)
    }
  }
}

<input id="searchbar" onkeyup="search_animal()" type="text" name="search">

<ul id="list-holder">

</ul>