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

我正在尝试创建一个搜索栏，当输入学校名称时，它会显示我从开放数据API中获得的学校名称

API:

我想要的是，如果我在我的搜索栏中输入单词“first”，第一所学校就会出现

到目前为止，在我的html中，当我单击搜索按钮时，它会更改我的URL，但每个学校的名称总是显示出来。我不确定下一步是什么

谢谢你抽出时间

My.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); 
    }
  }

let name='name'；
const api='https…api网站。json'+
`$where=类似“%${name}%”的名称+
“&$order=name”；
consturl=encodeURI（api）；
document.addEventListener（“DOMContentLoaded”，load）；
函数加载（）{
fetch（'https:..api网站….json'）
.然后（函数（结果）{
返回result.json（）；
})
.then（函数（数据）{
学校名单（数据）；
});
}
功能列表学校（学校数据）{
让body=document.getElementsByTagName（“body”）[0]；
让footer=document.getElementsByTagName（“footer”）[0]；
让input=document.getElementById（'input'）；//来自HTML的id
对于（设i=0；i您可以这样做：您可以在单击搜索按钮时获取过滤项，并在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)
           }
       
       }

  

let body=document.getElementsByTagName（“body”）[0]；
让footer=document.getElementsByTagName（“footer”）[0]；
让input=document.getElementById（'input'）；//来自HTML的id
let button=document.getElementById（'btn'）；//搜索按钮
addEventListener（'click'，（）=>filterList（input.value））；
功能列表学校（学校数据）{
对于（设i=0；i我不确定您是否需要使用VanillaJS或允许使用其他库，但通过使用
ajax
与
select2
相结合，这将很容易。这一切都会在我的listSchools（）函数中吗？还是我应该完全摆脱它。编辑答案以包含listSchools（）函数。listSchools（）函数将列出学校。filterTerm（）函数仅在找到搜索词时显示。因此，您需要同时保留这两个词。
 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)
           }
       
       }