打印出多个搜索结果

Question

所以，我正在开发一个带有搜索功能的网页，用户可以输入活动名称和朋友的名字，页面会根据这些输入显示搜索结果。

提前道歉，我的代码是一个绝对的混乱（但它有效，这就是我现在关心的所有）但是，我的问题是，我不知道打印出所有搜索结果的好方法。我在互联网上看到了我现在所拥有的内容如下：

$('#searchFeedback').empty();
$.each(data.events[i], function (index, value) {
    $('#searchFeedback').append(output);
})

这是我找到的最好的选项（并且是唯一一个以任何方式工作的选项，即使我必须混合使用JQuery），但问题是它反复打印出最后的搜索结果，甚至没有合适的数量，而不是打印出每个搜索结果。我对JQuery完全无能为力。

这是我的整个JS代码：

<script>

                    function eventSearch() {
                        var eName = document.getElementById("ename").value;
                        var fName = document.getElementById("fname").value;
                        var searchResults = "";
                        var friendResults = "";
                        var attendeeText = "";

                        if (eName === "" && fName === "") {

document.getElementById("searchFeedback").innerHTML = "<h4 class='eName'>Fields cannot be empty!</h4>";

                        } else {

                            for (var i = 0; i < data.events.length; i++) {

                                searchResults = data.events[i].eName.toUpperCase();

                                var output = "<h4 class='eName'>" + data.events[i].eName + " &bull; " + data.events[i].date + "</h4> <p class='eDesc'>" + data.events[i].description + "<br><sub>" + attendeeText + "<a class='event' onclick='openEventLink(" + i + ");' href=''><b> Check it out here.</b> </a></sub></p><br>";

                                if (eName != "" && searchResults.includes(eName.toUpperCase())) {

                                    if (data.events[i].attendees.length != 1) {
                                        for (var a = 0; a < data.events[i].attendees.length; a++) {
                                            attendeeText = data.events[i].attendees.join(", ");
                                        }
                                    } else {
                                        attendeeText = data.events[i].attendees;
                                    }


                                    if (data.events[i].attendees.length > 1) {
                                        attendeeText = attendeeText + " are going.";
                                    } else if (data.events[i].attendees.length == 1) {
                                        attendeeText = attendeeText + " is going.";
                                    } else {
                                        attendeeText = "";
                                    }

                                    if (fName != "") {
                                        for (var a = 0; a < data.events[i].attendees.length; a++) {
                                            friendResults = data.events[i].attendees[a].toUpperCase();
                                            if (friendResults.includes(fName.toUpperCase())) {

                                                console.log(searchResults);
                                                console.log(friendResults);

                                                $('#searchFeedback').empty();
                                                $.each(data.events[i], function (index, value) {
                                                    $('#searchFeedback').append(output);
                                                })

                                            }
                                        }


                                    } else {
                                        // Print results
                                    }



                                } else if (eName == "" && fName != "") {
                                    for (var a = 0; a < data.events[i].attendees.length; a++) {

                                        if (friendResults.includes(fName.toUpperCase())) {
                                            console.log(friendResults);
                                            console.log(data.events[i].eName);

                                            if (data.events[i].attendees.length != 1) {
                                                for (var a = 0; a < data.events[i].attendees.length; a++) {
                                                    attendeeText = data.events[i].attendees.join(", ");
                                                }
                                            } else {
                                                attendeeText = data.events[i].attendees;
                                            }


                                            if (data.events[i].attendees.length > 1) {
                                                attendeeText = attendeeText + " are going.";
                                            } else if (data.events[i].attendees.length == 1) {
                                                attendeeText = attendeeText + " is going.";
                                            } else {
                                                attendeeText = "";
                                            }

                                           // Print results


                                        }
                                    }
                                }
                            }
                        }    
                    }

                    /* document.getElementById("searchFeedback").innerHTML =
                                                "<h4 class='eName'>" + data.events[i].eName + " &bull; " + data.events[i].date + "</h4> <p class='eDesc'>" + data.events[i].description + "<br><sub>" + attendeeText + "<a class='event' onclick='openEventLink(" + i + ");' href=''><b> Check it out here.</b> </a></sub></p><br>"; */

</script>

非常感谢你！

编辑：这是我的数据库的结构。那里有更多的东西，但这是相关的一点。

var data = {
   "events": [
      {
        "eName": "The Dalek Invasion of Earth",
        "date": "6.5.2017",
        "time": "10-15",
        "description": "People assume that time is a strict progression of cause-and-effect... but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly-wobbly... timey-wimey... stuff. It is! It's the city of New New York! Strictly speaking, it's the fifteenth New York since the original, so that makes it New-New-New-New-New-New-New-New-New-New-New-New-New-New-New New York. Goodbye...my Sarah Jane! Yeah? Well I'm the Lord of Time. Black tie...Whenever I wear this, something bad always happens.",
        "attendees": ["Jack Harkness", "Rose Tyler"],
        "eLink": "http://tardis.wikia.com/wiki/The_Dalek_Invasion_of_Earth_(TV_story)"
      },
      {
        "eName": "The Day of the Doctor",
        "date": "7.5.2017",
        "time": "15-18",
        "description": "I'm sorry. I'm so sorry. There's something else I've always wanted to say: Allons-y, Alonso! I don't want to go. Allons-y! What? What?! WHAT?! It is! It's the city of New New York! Strictly speaking, it's the fifteenth New York since the original, so that makes it New-New-New-New-New-New-New-New-New-New-New-New-New-New-New New York. Oh, yes. Harmless is just the word: that's why I like it! Doesn't kill, doesn't wound, doesn't maim. But I'll tell you what it does do: it is very good at opening doors!",
        "attendees": ["Amelia Pond", "Donna Noble"],
        "eLink": "http://tardis.wikia.com/wiki/The_Day_of_the_Doctor_(TV_story)"
      }
  ]
};

Edit2：我将添加我的表单的HTML，以防它有用。

<div class="eventSearch">
                <h2>Search for events</h2>

                <form id="login" onsubmit="return eventSearch()">
                    <b>By event name:</b> <input type="text" name="ename" id="ename" size="56" placeholder="i.e. The Time War"><br>
                    <b>By a friend's name:</b> <input type="text" name="fname" id="fname" size="50" placeholder="i.e. Rose Tyler"><br><br>

                    <input type="radio" name="dates" value="allDates" checked> All events<br>
                    <input type="radio" name="dates" value="pastDates"> Past events<br>
                    <input type="radio" name="dates" value="futureDates"> Future events<br><br>

                    <button type="submit" id="confSearch" name="confSearch" onclick="event.preventDefault(); eventSearch();"><b>Search</b></button><br><br>

                </form>

                <div id="searchFeedback"></div>

即使是其他编辑：有关进一步说明，此处是我的网页的实时版本：http://users.metropolia.fi/~natalisu/Event%20calendar/main.html

Answer 1

我不确定，但也许会有所帮助

＆＃13;

＆＃13;

$('button').click(eventSearch);

var data = {
   "events": [
      {
        "eName": "The Dalek Invasion of Earth",
        "date": "6.5.2017",
        "time": "10-15",
        "description": "People assume that time is a strict progression of cause-and-effect... but actually, from a non-linear, non-subjective viewpoint, it's more like a big ball of wibbly-wobbly... timey-wimey... stuff. It is! It's the city of New New York! Strictly speaking, it's the fifteenth New York since the original, so that makes it New-New-New-New-New-New-New-New-New-New-New-New-New-New-New New York. Goodbye...my Sarah Jane! Yeah? Well I'm the Lord of Time. Black tie...Whenever I wear this, something bad always happens.",
        "attendees": ["Jack Harkness", "Rose Tyler"],
        "eLink": "http://tardis.wikia.com/wiki/The_Dalek_Invasion_of_Earth_(TV_story)"
      },
      {
        "eName": "The Day of the Doctor",
        "date": "7.5.2017",
        "time": "15-18",
        "description": "I'm sorry. I'm so sorry. There's something else I've always wanted to say: Allons-y, Alonso! I don't want to go. Allons-y! What? What?! WHAT?! It is! It's the city of New New York! Strictly speaking, it's the fifteenth New York since the original, so that makes it New-New-New-New-New-New-New-New-New-New-New-New-New-New-New New York. Oh, yes. Harmless is just the word: that's why I like it! Doesn't kill, doesn't wound, doesn't maim. But I'll tell you what it does do: it is very good at opening doors!",
        "attendees": ["Amelia Pond", "Donna Noble"],
        "eLink": "http://tardis.wikia.com/wiki/The_Day_of_the_Doctor_(TV_story)"
      }
  ]
};
function eventSearch() {
    var eName = document.getElementById("ename").value || "";
    var fName = document.getElementById("fname").value || "";
    var searchResultsEname = "";

    var friendResults = "";
    var attendeeText = "";


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

    if (eName === "" && fName === "") {

        document.getElementById("searchFeedback").innerHTML = "<h4 class='eName'>Fields cannot be empty!</h4>";

    } else {

        for (var i = 0; i < data.events.length; i++) {

            searchResultsEname = data.events[i].eName.toUpperCase();
            

            console.log(searchResultsEname);
            
            console.log(friendResults);

            var output = "<h4 class='eName'>" + data.events[i].eName + " &bull; " + data.events[i].date + "</h4> <p class='eDesc'>" + data.events[i].description + "<br><sub>" + attendeeText + "<a class='event' onclick='openEventLink(" + i + ");' href=''><b> Check it out here.</b> </a></sub></p><br>";

            if (eName != "" && searchResultsEname.includes(eName.toUpperCase())) {

                if (data.events[i].attendees.length != 1) {
                    for (var a = 0; a < data.events[i].attendees.length; a++) {
                        attendeeText = data.events[i].attendees.join(", ");
                    }
                } else {
                    attendeeText = data.events[i].attendees;
                }


                if (data.events[i].attendees.length > 1) {
                    attendeeText = attendeeText + " are going.";
                } else if (data.events[i].attendees.length == 1) {
                    attendeeText = attendeeText + " is going.";
                } else {
                    attendeeText = "";
                }


                $('#searchFeedback').append(output);
                

            } 

            if (fName != "") {

                for (var a = 0; a < data.events[i].attendees.length; a++) {
                    friendResults = data.events[i].attendees[a].toUpperCase();

console.log(friendResults);
                    if (friendResults.includes(fName.toUpperCase())) {

                        $('#searchFeedback').append(output);

                    }
                }
             
                    
            } 
        }
    }
}

eventSearch();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<label for="ename">eName    <input type="text" id="ename" value="The Dalek Invasion of Earth"></label>
<label for="fname">fName
<input type="text" id="fname" value=""></label>

<button>Search</button>

<div id="searchFeedback">
  
</div>

＆＃13;

＆＃13;

＆＃13;