Question

我正在通过JSON对象创建一个包含一些图像，细节和搜索输入选项的页面。我的问题是当我使用搜索选项时它没有显示任何结果。但是它在正常情况下显示JSON页面上的数据。

我也尝试了其他帖子，但没有运气。

HTML代码：

<div class="wrapper">
            <div class="header">Logo Name</div>
            <div class="middle">
                <div id="results"></div>
                <div class="leftContainer">

                </div>
                <div class="rightContainer">
                    <input type="text" id="inputText" />&nbsp;&nbsp;<input type="button" id="button" value="Search Data" />
                </div>
            </div>
            <div class="footer">
                &copy; 2013 ABC. All rights reserved.
            </div>
        </div>

jQuery代码： 在#button下方点击将显示数据。

$(document).ready(function(){        
    $.getJSON('assets/js/sample.json', function(data){
        var items = [];

        $.each(data.latest, function() {
            items.push("<h2>" + this['thumbTitle'] + "</h2>");
            items.push("<ul><li>" + this['thumbSmall'] + "</li></ul>");
            items.push("<p>" + this['description'] + "</p>");
        });

        $('<div />', {
           html: items.join('')
            }).appendTo('.leftContainer');

        $('#button').on('click', function(data, name) {                                       


            name = $('#inputText').val().toUpperCase();
            alert(name);  
            var results;
            results = data.latest.filter(function() {
                return data.latest.name.toUpperCase().indexOf(name) !== -1;
            });
            return $('#results').innerHTML() = results;
            console.log(results);
        });
   });
});

JSON数据：

{
    "latest"    :[
                    { 
                        "thumbTitle":"Image Title1",
                        "thumbSmall" : ["<img src='assets/images/thumb1.jpg' alt='' />", "<img src='assets/images/thumb2.jpg' alt='' />"],
                        "description" : "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries."
                    }, 
                    { 
                        "thumbTitle":"Image Title2",
                        "thumbSmall" : ["<img src='assets/images/thumb3.jpg' alt='' />", "<img src='assets/images/thumb2.jpg' alt='' />", "<img src='assets/images/thumb4.jpg' alt='' />", "<img src='assets/images/thumb1.jpg' alt='' />"],
                        "description" : "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."
                    }, 
                    { 
                        "thumbTitle":"Image Title3",
                        "thumbSmall" : ["<img src='assets/images/thumb3.jpg' alt='' />", "<img src='assets/images/thumb2.jpg' alt='' />"],
                        "description" : "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable."
                    }, 
                    { 
                        "thumbTitle":"Image Title4",
                        "thumbSmall" : ["<img src='assets/images/thumb1.jpg' alt='' />"],
                        "description" : "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham."
                    }
    ]
}

Answer 1

如果我理解你的需要，点击功能应该是，

取决于您要搜索的字段，即“thumbTitle”或“description”

$('#button').on('click', function(e) {
    e.preventDefault();                                       
    var name = $('#inputText').val().toUpperCase();
    alert(name);  
    var results = data.latest.filter(function(elem) {
                      return elem.thumbTitle.toUpperCase().indexOf(name) !== -1;
                  });
    console.log(results.length);
    var items = [];
    $.each(results, function() {
        items.push("<h2>" + this['thumbTitle'] + "</h2>");
        items.push("<ul><li>" + this['thumbSmall'] + "</li></ul>");
        items.push("<p>" + this['description'] + "</p>");
    });

    $('#results').empty();

    $('<div />', {
       html: items.join('')
    }).appendTo('#results');
});

修改

这取决于你如何过滤数组，就像你也可以在过滤条件中考虑'描述'，

var results = data.latest.filter(function(elem) { return elem.thumbTitle.toUpperCase().indexOf(name) !== -1 || elem.description.toUpperCase().indexOf(name) !== -1; });

希望这会有所帮助。

如何使用jQuery .filter（）方法显示JSON数据

1 个答案: