用于在JSON中查找对象名称的搜索功能

Question

JSON文件：

[
    {
            "destination": "Hawaii",
            "Country": "U.S.A",
            "description": "...etc, etc",
            "images": {
                "image": [
                    "hawaii1.jpg",
                    "hawaii2.jpg",
                    "hawaii3.jpg",
                    "hawaii4.jpg"
                ]
            }
        }, 
    ***about 5 more destinations continuing on***

。JS：

function searchBar() {

   var input = document.getElementById('searchbox').value;
   var name = ["Hawaii", "London", "Bangkok", "Sydney", "Vegas", "Miami"];
   var ul = document.getElementById("cities");  //ul in markup where li of destinations is displayed


   //I know i need to do an if statement in a for loop, just not sure how.
   for (let i = 0; i < name.length; i++){

       if(input == name){
        li[i].style.display = "";
       } else{
        li[i].style.display = "none";
       }

    }
}

我想拥有它，因此，当输入NAME或COUNTRY时，HTML中的搜索栏将显示该目的地。不知道如何处理。我当时正在考虑将名称放入数组中，然后将其与“搜索框”值进行比较？？

JSON对象已通过不同的函数附加到h2元素，然后又附加到li元素。抱歉，我遗漏了很多代码，如果您需要更多信息，请告诉我。

JSON文件：[{“目的地”：“夏威夷”，“国家/地区”：“美国”，“说明”：“ ...等，等等”，“图像”：{“图像”：[...] >

Answer 1

为了监听input事件，您需要向其添加一个监听器，然后您可以监听keyup。一旦知道有人键入了内容，便要遍历所拥有的数据，并检查其是否与对象的destination或Country值中的任何一个相匹配。

如果是这种情况，只需将一个列表项附加到当前无序列表，就像这样：