如何从对象数组中搜索内容

时间:2015-07-08 07:26:25

标签: javascript

如何使用纯JavaScript搜索数据中的内容?使用按钮单击完成搜索。

 <html><head>
 <meta charset="utf-8">
  <title>search</title>
</head>

<body>
<div id="lidynamic"><ul><li id="first">undefined</li><li id="second">Firefox 1.0</li><li id="third">Win 98+ / OSX.2+</li><li id="fourth">1.7</li></ul><ul><li id="first">Tatsman</li><li id="second">Firefox 1.5</li><li id="third">Win 98+ / OSX.2+</li><li id="fourth">1.8</li></ul></div>
<input name="search" type="text" maxlength="512" id="search"    class="searchField" autocomplete="off" title="">
<input type="submit" id="btnsearch">

<script>

var arr = 
      [{
         "engine1": "Gecko",
         "browser": "Firefox 1.0",
         "platform": "Win 98+ / OSX.2+",
         "version": "1.7",

     }, {
         "engine": "Tatsman",
         "browser": "Firefox 1.5",
         "platform": "Win 98+ / OSX.2+",
         "version": "1.8",
     }
      ];


 function list() {
  var uls = [];
   for (var n = 0; n < arr.length; n++) {
    uls.push("<ul><li id='first'>" + arr[n].engine + "</li>" +
        "<li id='second'>" + arr[n].browser + "</li>" +
        "<li id='third'>" + arr[n].platform + "</li>" +
        "<li id='fourth'>" + arr[n].version + "</li></ul>");
    }
    content.innerHTML = uls.join('');
    }     

 var content;
 window.onload = function () {
content = document.getElementById("lidynamic");
list();   
 }

</script>

</body></html>

1 个答案:

答案 0 :(得分:0)

您可以使用array.filter

 arr.filter(callback[, thisArg])

来自MDN Doc ..

 function isBigEnough(value) {
    return value >= 10;
 }
 var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
 // filtered is [12, 130, 44]