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

问题描述

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中的搜索栏就会显示该目的地.我当时正在考虑将名称放入数组中，然后将其与搜索框"值进行比较??

I want to have it so the search bar in my HTML will display that destination when the NAME OR COUNTRY is typed in. Not sure how to approach this. I was thinking making names into an array then comparing that with the 'searchbox' value??

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

The JSON objects have been appended to h2 elements in a different function, which was then appended into a li element.Sorry, I left out a lot of code, please let me know if you need more info.

推荐答案

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

In order to listen to input events you need to add a listener to it, then you can listen for keyup for example. Once you know someone typed something, then you want to go through the data that you have and check if it matches any of the object's destination or Country values.

如果是这种情况，则只需将列表项添加到当前无序列表即可，就像这样:

If that's the case, then just append a list item to the current unordered list, something likke:

let data = [{
  destination: "Hawaii",
  Country: "U.S.A",
  description: "...etc, etc",
  images: {
    image: ["hawaii1.jpg", "hawaii2.jpg", "hawaii3.jpg", "hawaii4.jpg"],
  },
}, ];

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

input.addEventListener("keyup", (e) => {
  let typed = e.target.value.toUpperCase();
  for (let o of data) {
    if (
      typed === o.destination.toUpperCase() ||
      typed === o.Country.toUpperCase()
    ) {
      let li = document.createElement("li");
      li.innerText = JSON.stringify(o);
      ul.append(li);
    }
  }
});

<p>Type <code>hawaii</code></p>
<input type="text" id="searchbox" />
<ul id="cities"></ul>

上面的解决方案有一些问题，例如，如果清除输入，则不会清除 ul ；如果再次输入相同的国家/地区，则它将继续添加新对象.这些是相对容易的修复程序，我会留给您，但总的来说，您希望遵循这些原则.

The solution above has a few issues, for example, it doesn't clear the ul if the input is cleared or it keeps appending new objects if you type the same country/destination again. Those are relatively easy fixes which I'll leave for you, but overall you'd want something along those lines.

这篇关于搜索功能可在JSON中查找对象的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！