Javascript 搜索列表中的JSON数据

我有下面的代码，你可以在输入中搜索，数据列表将在下拉列表中。但是我想知道如何更改它以从JSON文件获取数据，而不是在

中编写列表







函数myFunction（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

首先，您可以创建外部文件（例如“data.json”）：

然后，您可以定义一个函数来使用数据数组更新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);
    }
}

然后，此代码将从页面填充现有UI元素：

<ul id="myUL"></ul>

试试这个：

var jsonObj=[
{“name”：“Adele”，“link”：“Adele.html”}，
{“name”：“Agnes”，“link”：“Agnes.html”}，
{“name”：“Billy”，“link”：“Billy.html”}，
{“name”：“Bob”，“link”：“Bob.html”}，
{“name”：“Calvin”，“link”：“Calvin.html”}，
{“name”：“Christina”，“link”：“Christina.html”}，
{“名称”：“Cindy”，“链接”：“Cindy.html”}
]
对于（i=0；i{
返回对象名称包括（e.key）==true；
});
document.getElementById（'myUL'）。innerHTML=''；
对于（i=0；i

让我确认一下，json文件或json数据……我现在在index.html文件中有这个文件，data.json在同一文件夹中。您的data.json不是有效的json，它是一个ObjectsHanks的javascript数组，我是否仍然需要添加我已更新的json文件以确保有效的json文件，并使用AJAX请求正确加载它。谢谢@baao发现我的错误。是的，@charlie97，这仍然适用于你的搜索代码。我为你编辑了它。现在它是有效的json。你需要把所有东西都装进
“
（还有钥匙），并且，
“
无效谢谢，我确实将所有代码粘贴到我的index.html文件中，脚本标记中包含脚本，但当我在浏览器上打开时，控制台显示：无法读取null的属性“appendChild”，并且它不工作，这是什么问题？我是否缺少一些内容确保您的
ul
元素应该具有
Id=“myUL“
因为我们只在这个id上添加子项。有没有办法将按键方法添加到这个函数中，以便用户可以使用键盘箭头选择选项？我使用了上面的代码，但现在我意识到，当我键入广告时，搜索会带来一个像cindy这样的随机名称，它只是在单词中搜索字母吗？”？搜索效果不好。@charlie97，因为没有下拉菜单来选择选项。我们只有一个搜索框。因此，在这种情况下，只有
keyup
事件才起作用。
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);
    }
}

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

<ul id="myUL"></ul>