javascript - Building a table that pulls data from MongoDB that filters in real time, and sorts alphabetically

Question

As the title suggests, that is what im attempting to do, but are at a lost. My best attempt is the following: This is the nodejs code that renders the HTML page and gets the user input from HTML

app.get('/search/species', (req,res) => {
  diseaseModel.find({matched: current_matched}, function (err,disease){
  res.render('species', {
    diseaseList: disease,

  });
});
})

app.post('/search/species', async(req,res) => {
  var desc = req.body.desc;
  await diseaseModel.updateMany({matched: current_matched, "$text":{"$search" : `"${desc}"`}}, {$inc: {matched: 1}});
    current_matched ++;

    res.redirect(302, '/search/species');
  }
}
});
})

This is the HTML page that I uses to collect user input and return the filtered options:

  <form action = "/search/species" method = "POST" id="submitMessage" class="field has-addons">
              <input class="form-control input is-primary" name = "desc" id = "desc" type="text" style="width: 100%;" placeholder="Enter a Description" required/>
              <button type="submit" class="button  is-primary" id="send">Send</button>
          </form>
      </div>

  </div>
</section>

      <table class = "content-table" align="center" style="margin: 0px auto;">

        <thead>
          <tr>
            <th>Name</th>
            <th>Species</th>
            <th>Vector</th>
            <th>Agent</th>
          </tr>
        </thead>

      <tbody>
      <%diseaseList.forEach(disease =>{%>
        <tr data-href= 'http://localhost:8080/info?id=<%=disease.id%>'>
        <th><%=disease.diseaseName%></th>
        <th><%=disease.species%></th>
        <th><%=disease.vector%></th>
        <th><%=disease.agent%></th>
        </tr>
      <% })%>
    </tbody>
  </table>
    </div>
</section>

<script>
$(document).ready(function() {
  $(document.body).on("click", "tr[data-href]", function() {
    window.location.href = this.dataset.href;
  })
});

But this doesn't refresh in real time, as in when i type a character, it doesn't start filtering. Would I be able to do this via AJAX? Also how would I list MongoDB data out in the table in alphabetical order?

question from:https://stackoverflow.com/questions/65859650/building-a-table-that-pulls-data-from-mongodb-that-filters-in-real-time-and-sor

Answer 1

Waitting for answers