只使用javascript和html为json API创建搜索栏？
只使用javascript和html为json API创建搜索栏？
提问于 2020-10-16 14:37:41
我正在尝试创建一个搜索栏，当我输入学校名称时，它将显示我从Open Data 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);
}
}回答 1
Stack Overflow用户
发布于 2020-10-16 19:30:58
您可以这样做:您可以在单击search按钮时获取筛选条件，并在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)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64384084
复制相关文章
相似问题
腾讯云开发者
