2015-11-29 32 views
0

我有一个名为data.json的文件和一个名为Search.html的文件。 Xbox360的JSON文件包含:不能按名称过滤json数据

[{ 
    "Name": "Assassin's Creed: Rogue", 
    "Image": "Images/360ACR.jpg", 
    "Platform": "XBOX 360" 
}, { 
    "Name": "Battlefield 3", 
    "Image": "Images/360BF3.jpg", 
    "Platform": "XBOX 360" 
}] 

搜索HTML文件包含:

<html>  
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
      $(document).ready(function() { 
       $('#search').keyup(function() { 
        var searchField = $('#search').val(); 
        var regex = new RegExp(searchField, "i"); 
        var output = '<div class="row">'; 
        var count = 1; 
        $.getJSON('data.json', function(data) { 
         $.each(data, function(key, val) { 
          if ((val.Name.search(regex) != -1) || (val.Platform.search(regex) != -1)) { 
           output += '<div class="col-md-6 well">'; 
           output += '<div class="col-md-3"><img class="img-responsive" src="' + val.Image + '" alt="' + val.Name + '" /></div>'; 
           output += '<div class="col-md-7">'; 
           output += '<h5>' + val.Name + '</h5>'; 
           output += '<p>' + val.Platform + '</p>' 
           output += '</div>'; 
           output += '</div>'; 
           if (count % 2 == 0) { 
            output += '</div><div class="row">' 
           } 
           count++; 
          } 
         }); 
         output += '</div>'; 
         $('#results').html(output); 
        }); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <form> 
      <div class="form"> 
       <input type="text" class="" id="search" placeholder="Search"> 
       <input type="button" id="search" value="Search" /> 
      </div> 
     </form> 
     <div id="results"></div> 
    </body> 
</html> 

这段代码的问题是,当用户键入a或任何信件到文本框中它带来了所有的数据来自JSON文件。我只是想让它按名称过滤它。所以如果我输入Assassins Creed它只会提供那个游戏。

我知道这个问题是繁琐的代码量我已经投入。这将是很好的人来帮助我。如果可以的话,我很感激。我正在尝试。

回答

0

尝试使用过滤器:

var res = data.filter(function(obj){ 
    return obj.Name.indexOf(input) >= 0; 
}); 

你想将在res对象的数组。 用您要检查的字符串替换input

看到这个JSFiddle:https://jsfiddle.net/4b5gffmu/

+0

感谢Arg0n的回应。我应该用什么替换它?或者我会在哪里放这段代码? – sdornan

+0

“$ .getJSON”回调的第一行。当你找回数据。之后继续使用'res'而不是'data'。 (''.each'之前) – Arg0n

+0

对不起,这打破了我的代码。所以会出现这样的 - $ .getJSON( 'data.json',函数(RES){ \t \t \t \t \t \t VAR解析度= data.filter(函数(OBJ){ 回报obj.Name.indexOf(名称)> = 0; }); – sdornan