Функция поиска для поиска названий объектов в 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";
       }

    }
}

Я хочу получить его, чтобы строка поиска в моем HTML отображала этот пункт назначения, когда ИМЯ ИЛИ СТРАНА набраны. Не знаете, как к этому подойти. Я думал сделать имена в массиве, а затем сравнить их со значением 'searchbox' ??

Объекты JSON были добавлены к элементам h2 в другой функции, которая затем была добавлена ​​в элемент li. Извините, я пропустил много кода, пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Answer 1

Для прослушивания input событий вам нужно добавить к нему прослушиватель, тогда вы можете прослушать, например, keyup. Как только вы узнаете, что кто-то что-то напечатал, вы хотите go просмотреть имеющиеся у вас данные и проверить, соответствует ли оно какому-либо из значений destination или Country объекта.

Если это так, то просто добавьте элемент списка в текущий неупорядоченный список, например:

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, если ввод очищен, или продолжает добавлять новые объекты, если Вы вводите ту же страну / пункт назначения снова. Это относительно простые исправления, которые я оставлю вам, но в целом вам нужно что-то в этом роде.