我有以下代码,您可以在输入中搜索,数据列表将在下拉列表中。但我想知道如何更改它以从 JSON 文件中获取数据,而不是将列表写入 <li><a>...
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
最佳答案
首先您可以创建外部文件(例如“data.json”):
[
{"name":"Adele", "href":"#"},
{"name":"Agnes","href":"#"},
{"name":"Billy","href":"#"},
{"name":"Bob","href":"#"},
{"name":"Calvin","href":"#"},
{"name":"Christina","href":"#"},
{"name":"Cindy","href":"#"}
]
然后,您可以定义一个函数来使用数据数组更新 UI:
function updateList(data) {
var ul = document.getElementById('myUL');
for (i = 0; i < data.length; i++) {
var a = document.createElement('a');
a.appendChild(document.createTextNode(data[i].name));
a.setAttribute('href', data[i].href);
var li = document.createElement('li');
li.appendChild(a);
ul.appendChild(li);
}
}
您可以使用带有 native javascript 的 AJAX 请求导入 json 文件:
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readystate == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
updateList(data);
}
};
request.open("GET", "data.json", true);
request.send();
此代码随后将填充页面中的现有 UI 元素:
<ul id="myUL"></ul>
关于javascript - 搜索列表中的 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50703304/