仅使用javascript和html创建json API的搜索栏？

如何解决仅使用javascript和html创建json API的搜索栏？

我正试图创建一个搜索栏，以显示键入名称时从Open Data API获取的学校的名称。

API：

[ {
  "address" : "123 Street","name" : "First School ....","website" : {
    "url" : 
       "http://......."
  }
},{
  "address" : "123 Bay","name" : "Second School ....","website" : {
    "url" : 
       "http://......."
  }
}   ....etc 

我想要的是，如果我在搜索栏中输入单词“ first”，那么只会出现First School。

到目前为止，当我单击“搜索”按钮时，它会更改我的URL，但始终显示每个学校的名称。我不确定下一步是什么...？

感谢您的时间。

我的.js文件：

let name = 'name'; 
const api = 'https...api website... .json' +
                `$where=name LIKE '%${name}%'` +
                '&$order=name';
const url = encodeURI(api);

document.addEventListener("DOMContentLoaded",load);

function load(){

    fetch('https:....api website... .json')
        .then(function(result) {
            return result.json(); 
        })
        .then(function(data) {  
            listSchools(data);
        });
}

function listSchools(schoolData){

    let body = document.getElementsByTagName("body")[0];
    let footer = document.getElementsByTagName("footer")[0];
    let input = document.getElementById('input');   //id from HTML

    for(let i = 0; i<schoolData.length; i++){
        let keys = Object.keys(schoolData[i]);
        let values = Object.values(schoolData[i]);

        let section = document.createElement("section");
        let h1 = document.createElement("h1");
        let ul = document.createElement("ul");

        h1.innerHTML = `${schoolData[i].name}`;
        section.appendChild(h1);
        section.appendChild(ul);
        body.insertBefore(section,footer); 
    }
  }

解决方法

您可以执行以下操作：您可以单击搜索按钮来获取过滤条件，然后在html h1标签中进行搜索。如果确实找到它，则返回第一个匹配项并将其附加到文档中。

 let body = document.getElementsByTagName("body")[0];
    let footer = document.getElementsByTagName("footer")[0];
    let input = document.getElementById('input');   //id from HTML
    let button = document.getElementById('btn'); //search button
        
    button.addEventListener('click',() => filterList(input.value));
 
    function listSchools(schoolData){
    for(let i = 0; i<schoolData.length; i++){
        let keys = Object.keys(schoolData[i]);
        let values = Object.values(schoolData[i]);

        let section = document.createElement("section");
        let h1 = document.createElement("h1");
        let ul = document.createElement("ul");

        h1.innerHTML = `${schoolData[i].name}`;
        section.appendChild(h1);
        section.appendChild(ul);
        body.insertBefore(section,footer); 
    }
   }
    
      function filterList(filterTerm){
        const h1Tags = document.querySelectorAll("h1");
           let filteredh1;
           for(const h1 of h1Tags){
           if (h1.innerText.toLowerCase().includes(filterTerm.toLowerCase())){
               document.body.innerHTML = '';
               filteredh1=h1
               break;
           }
        }
           if(filteredh1 !== undefined){
             let section = document.createElement("section");
             let newh1= document.createElement("h1");
             let newul= document.createElement("ul");
             newh1.innerHTML = filteredh1.textContent
             section.appendChild(newh1);
             section.appendChild(newul);
             body.appendChild(input);
             body.appendChild(button);
             body.insertBefore(section,footer); 
           }
           else {
             let errorMessage = document.createElement("h1")
             errorMessage.innerHTML = "Not found"
             body.appendChild(errorMessage)
           }
       
       }