仅显示数组中包含特定字符串的对象

Question

我试图做一些你可以输入字符串的东西，而 js 只显示包含这个字符串的对象。例如，我键入 Address1，它会搜索每个地址的值，然后显示它（这里：它将是 Name1）。这是我的代码https://jsfiddle.net/76e40vqg/11/

HTML

<input>
<div id="output"></div>

JS

var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"},
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"},
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"}
];

var restoName = [], restoAddress = [], restoRate = [], restoImage= [];
for(i = 0; i < data.length; i++){    
        restoName.push(data[i].name);
        restoAddress.push(data[i].address);
        restoRate.push(data[i].rate);
        restoImage.push(data[i].image);
}

for(i = 0; i < restoName.length; i++){
document.getElementById('output').innerHTML += "Image : <a href='" + restoImage[i] + "'><div class='thumb' style='background-image:" + 'url("' + restoImage[i] + '");' + "'></div></a><br>" + "Name : " + restoName[i] + "<br>" + "Address : " + restoAddress[i] + "<br>" + "Rate : " + restoRate[i] + "<br>" + i + "<br><hr>";
  }

我确实尝试了很多东西，但没有任何效果，这就是我在这里问的原因......

Answer 1

不要将详细信息存储为单独的数组。相反，使用类似于返回的数据对象的结构。

for(i = 0; i < data.length; i++){ 
    if (data[i].address.indexOf(searchedAddress) !== -1) { // Get searchedAddress from user
        document.getElementById("output").innerHTML += data[i].name;
    }
}

在您的 JSFiddle 上进行编辑：https://jsfiddle.net/76e40vqg/17/

干杯！

Answer 2

这是一个可行的解决方案：

var data = [{"image":"http://www.w3schools.com/css/img_fjords.jpg","name":"Name1","address":"Address1","rate":"4.4"},
{"image":"http://shushi168.com/data/out/114/38247214-image.png","name":"Name2","address":"Address2","rate":"3.3"},
{"image":"http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg","name":"Name3","address":"Address3","rate":"3.3"}
];
document.getElementById('search').onkeyup = search;
var output = document.getElementById('output');


function search(event) {
  var value = event.target.value;
  
  output.innerHTML = '';
  
  data.forEach(function(item) {
    var found = false;
    Object.keys(item).forEach(function(val) {
      if(item[val].indexOf(value) > -1) found = true;
    });
    
    if(found) {
      // ouput your data
      var div = document.createElement('div');
      div.innerHTML = item.name
      output.appendChild(div);
    }
  });
  
  return true;
}

<input type="search" id="search" />

<div id="output"></div>