根据用户输入过滤事件

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

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

选项 #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();
        }
    })
}