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

Question

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

API：

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

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

到目前为止，在我的 html 中，当我单击“搜索”按钮时，它会更改我的 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); 
    }
  }

Answer 1

您可以这样做：您可以在单击搜索按钮时获取过滤器词，并在 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)
           }
       
       }