根据用户输入过滤事件

Question

这是我的设计。

https://i.stack.imgur.com/AmP24.png

在获取请求时，我从MongoDB数据库获取数据并渲染视图。 现在，我想根据表单上的用户输入来过滤数据。

这样做的最佳方法是什么？

这是ejs模板：

 <div class="row">
            <% events.forEach((event) => { %>
          <div class="col-lg-6 g-mb-30">
            <!-- Event Listing -->                
            <span class="badge  g-font-size-13"><%-event.type%></span>                
            <article class="u-shadow-v39">                  
              <div class="row">
                    <div class="media-body g-pt-40 col-4 text-center g-bg-main">
                        <span class="g-color-orange g-font-weight-500 g-font-size-40 g-line-height-0_7"><%-event.date.getMonth()%></span>
                        <span class="g-line-height-0_7 g-color-white"><%-monthNames[event.date.getMonth()]%></span>
                        <span class="g-color-orange g-ml-5 g-font-weight-500 g-font-size-40 g-line-height-0_7"><%-event.date.getFullYear()%></span>                            
                    </div>                      

                <div class=" col-8 g-mb-5 g-mt-10 ">                                                  
                      <% event.topics.forEach((topic) => { %>
                        <%if(event.topics.length==1){%>
                          <h3 class="  text-center g-pt-35 g-mb-0 u-link-v5 g-color-orange g-color-primary--hover g-font-size-18 g-pr-10">
                          <% }else{%>
                            <h3 class="  text-center   g-mb-0 u-link-v5 g-color-orange g-color-primary--hover g-font-size-18 g-pr-10">
                            <% }%>
                    <%-topic.topic%> </h3>
                    <div class="  text-center u-link-v5 g-color-main g-color-primary--hover g-font-size-18 g-mb-5"><i class="icon-education-097 g-pr-5"></i> <%-topic.time%></div>  
                    <% })%>
                    <h3 class=" text-left g-pb-10 g-mb-0 u-link-v5 g-color-purple g-color-primary--hover g-font-size-18 g-pr-10"><i class="icon-travel-078 g-pr-5"></i> <%-event.location%></h3>

                </div>   


              </div>
            </article>               
          </div>
          <% }) %> 
        </div>

这是获取请求

 //events function getEvents(req,res,next){ mongo.find('events','',function(err,res){ if(!err){ req.events=res; return next(); } }) } function renderEvents(req,res){ res.render('layouts/events',{events:req.events, monthNames : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]}); } app.get('/events',getEvents,renderEvents); 

Answer 1

好吧，您实际上只有两种选择：在客户端执行或在服务器端执行-您可以通过扩展现有路由来执行。

选项＃1：客户端

您可以将onclick事件处理程序附加到搜索按钮。 单击按钮后，您将通过显示或隐藏与表单条件匹配的元素来过滤DOM事件。 要确定事件是否符合条件，您必须从DOM中提取信息。 在为事件构建HTML时，最好添加有意义的类以使其更容易提取信息。

下面是一个简化的示例。

 // not sure if you are using jQuery, but we'll use vanilla JS // though the former makes it easier to do things window.onload = function() { // get references to all elements we'll be using var searchForm = document.getElementById('search-form'), typeSelect = searchForm.elements['type'], monthSelect = searchForm.elements['month'], yearSelect = searchForm.elements['year'], searchBtn = document.getElementById('search-btn'), eventList = document.getElementsByClassName('event'); // create an onclick handler for your search button searchBtn.onclick = function() { // get form values var searchType = typeSelect.value, searchMonth = monthSelect.value, searchYear = yearSelect.value; // filter events based on form values for (var i = 0, len = eventList.length; i < len; i++) { var event = eventList[i]; // extract values from event thanks to the class names var eventType = event.getElementsByClassName('type')[0].innerText, eventDate = event.getElementsByClassName('date')[0].innerText; var match = (!searchType || searchType === eventType) && (!searchMonth || eventDate.indexOf(searchMonth) > -1) && (!searchYear || eventDate.indexOf(searchYear) > -1); // show event if it matches criteria event.style.display = match ? 'block' : 'none'; } }; } 

 .event,.row{overflow:hidden}label{display:block}form{overflow:hidden;width:300px}.row{padding:5px 0;}.row .col{float:left;width:45%;padding:5px;}.event{margin-bottom:10px}.event .date{background:navy;clear:left;color:orange;height:150px;float:left;line-height:150px;text-align:center;width:150px}.event .content{float:left;padding-left:5px} 

 <form id="search-form"> <div class="row"> <div class="col"> <label>Events Type</label> <select name="type"> <!-- leave first option blank --> <option value="">All</option> <option>Conference</option> <option>Field Trip</option> <option>ET Lab</option> </select> </div> <div class="col"> <label>Month</label> <select name="month"> <option value="">All</option> <option>August</option> <option>October</option> <option>December</option> <!-- etc --> </select> </div> </div> <div class="row"> <div class="col"> <label>Year</label> <select name="year"> <option value="">All</option> <option>2018</option> <option>2017</option> </select> </div> <div class="col"> <button type="button" id="search-btn">Search</button> </div> </div> </form> <h4>All Events</h4> <!-- when you build your events, use meaningful class names as we will need it later --> <div class="event-list"> <div class="event"> <div class="type">Conference</div> <div class="date">9 October 2017</div> <div class="content"> <div class="title">Robots & Bridge</div> <div class="time">4:00 PM to 5:00 PM</div> </div> </div> <div class="event"> <div class="type">Field Trip</div> <div class="date">11 December 2017</div> <div class="content"> <div class="title">Newtown Creek</div> <div class="time">10:00 AM to 12:00 PM</div> </div> </div> <div class="event"> <div class="type">ET Lab</div> <div class="date">7 August 2018</div> <div class="content"> <div class="title">Robots</div> <div class="time">4:00 PM to 5:00 PM</div> </div> </div> <div class="event"> <div class="type">Field Trip</div> <div class="date">11 August 2017</div> <div class="content"> <div class="title">Lab Ribbon Cutting</div> <div class="time">4:00 PM to 5:00 PM</div> </div> </div> </div> 

选项2：服务器端

扩展您的GET /events处理程序，以接受类型，月份，年份的其他但可选的请求参数。 我不会像以前那样详细，但是您可以更改表格以便提交。

<form method="GET" action="path/events">
    <!-- etc -->
    <button type="submit">Search</button>
</form>

然后在您的GET /events处理程序中

function getEvents(req,res,next){
    var query = {};
    if (req.query.type) {
        // do something to the query with type
    }
    if (req.query.month) {
        // do something to the query with month
    }
    if (req.query.year) {
        // do something to the query with year
    }
    // use query in your find() call 
    // i am not too familiar with mongo but there should be a way to build queries -- i hope
    mongo.find( ... ,function(err,res){
        // everything else stays the same
        if(!err){
            req.events=res;            
            return next();
        }
    })
}