Question

我有一个名为data.json的文件和一个名为Search.html的文件。 xbox360 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，它只会启动该游戏。

我知道这个问题对于我放入的代码量很繁琐。有人帮助我会很好。如果可以，我很感激。我顺便试试。

Answer 1

尝试使用过滤器：

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

您想要的对象数组将位于res中。将input替换为您要检查的字符串。

请参阅此JSFiddle：https://jsfiddle.net/4b5gffmu/

无法仅通过名称

1 个答案: