如何在ajax调用expressjs后使用jquery呈现部分ejs模板

Question

I am having trouble finding out how to create part of the DOM on ejs after a jquery ajax call. The feature is a live search which works great and it sends the request to the server, it searches the db and returns a variable containing the list of users based on the search. The problem begins there as EJS doesn't allow partials anymore and the way to embed javascript on html doesn't work on jquery or at least i don't know how. My mind is stuck so any help is greatly appreciated.

This is the Ajax call

$.ajax({
    url: 'http://localhost:3000/contactsearch',
    type: 'post',
    dataType: 'text',
    data: { searchquery: searchquery}
})
.done(function(res){
  var persons = res;
})

The page is rendered by Express this way:

exports.search = function(req, res){
res.render('./contacts/search', { title: 'Contact search', persons: persons });
};

The request returns an updated persons variable and i need to generate the html for the contact list. I tried many ways but can't get to achieve it. The way the page is initially rendered is like this so i don't know how to just refresh the list based on the updated persons variable.

HTML goes like this:

 <% if (persons.length) { %>
    <% persons.forEach(function(person) { %>
    <div class='contactlistusername'><%= person.username %></div>
    <% })}%>

Answer 1

Try Handling each AJAX updated success result in a different template to render: (in js)

var renderedData = new EJS({url:'/template/rendering.template'}).render({data:persons});
$('.contact').html(renderedData);

If persons is a array object returmed from your AJAX response, handle in different template file: (in template)

<% if (persons.length) { %>
<% for(var i in persons) { %>
<div class='contactlistusername'><%= persons[i].username %></div>
<% }} %>