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

Question

I am trying to create a search bar that will show the names of schools that I've gotten from an Open Data API when their name is typed.

API:

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

What I want is if I input the word "first" in my search bar just First School will appear.

So far in my html when I click the Search button it changes my URL but every school name is always showing. Im not sure what my next step is ... ?

Thanks for your time.

My .js file:

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

Answer 1

You can do something like this: You can take the filter term on click of search button and search for it in the html h1 tags. If you do find it then return with the first match and append it to the document.

 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)
           }
       
       }