2017-05-03 1 views
0

그래서 사용자가 이벤트 이름과 친구의 이름을 입력 할 수있는 검색 기능이있는 웹 페이지에서 작업 중이며 페이지에 이러한 입력을 기반으로 검색 결과가 표시됩니다.여러 검색 결과 인쇄

사전에 사과드립니다. 내 코드는 절대적으로 엉망입니다 (하지만 지금 당장은 신경 써야합니다). 그러나 제 문제는 모든 검색 결과를 인쇄하는 좋은 방법을 모르겠다는 것입니다. 나는 인터넷에 보니 내가이 지금에있는 것은 다음과 같다 :

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

이 내가 JQuery와 믹스했다하더라도, 내가 찾은 최고의 옵션 (어떤 방법으로 일을하는 유일한 하나입니다) 그러나 문제는 각 검색 결과를 인쇄하는 대신 올바른 검색 결과를 반복하여 인쇄하는 것입니다. 나는 JQuery에 대해 완전히 단서가 없다.

<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> 

그렇게 대단히 감사합니다 :

은 여기 내 전체 JS 코드입니다!

편집 : 여기 내 데이터베이스의 구조가 있습니다. 거기에 더 많은 것들이로드되어 있지만 여기에 관련 비트가 있습니다.

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)" 
     } 
    ] 
}; 

편집 2 : 도움이 될 경우를 대비하여 양식의 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

+0

'$ ('# searchFeedback') 때문에 인쇄가 끝난 것일 수도 있습니다. empty();'? – Leguest

+0

해당 줄을 삭제해도 아무런 차이가 없으므로 그럴 수 없습니다. – Koenshi

+0

좋아, 그럼'data.events [i]'란 무엇입니까? 여기에 보여줄 수 있습니까? – Leguest

답변

0

,하지만 어쩌면 그것은 도움이 될 것입니다

$('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();
<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>

+0

이것은 불행하게도 효과가 없습니다. 검색이 제대로 작동하지 않으며 한 가지 결과 만 다시 표시됩니다. – Koenshi

+0

답을 업데이트했습니다. 리팩토링을 많이하십시오 – Leguest

+0

이런 종류의 작품! 검색 결과를 예상대로 표시하지만 두 입력을 별도로 검색합니다. 즉, 이벤트 이름 검색이 특정 이벤트를 출력하고 친구 이름 검색이 이벤트 이름 입력 및 친구 이름과 일치하는 이벤트를 검색하는 대신 다른 이벤트를 출력합니다 입력. 그래서 때때로 나는 몇몇 사건을 두 번이나받습니다. 또한 친구 검색 자체가 작동하지 않습니다. – Koenshi