JSFiddle - React, Tailwind, and code Playground

HTML

// The Html file --- app/client/templates/search.html
// Note: categoryName, title and date are the fields of the current document ( 1 for each loop of the esEach)
// Note 2: Make sure the name of index is correct, for example, i have:
// this.News = new Mongo.Collection('news') , so i have to type index='news' and NOT 'News'

<div class="search-section">
    {{> esInput index=indexes placeholder="Procurar..." }}
</div>

{{#esEach index="Comments"}}
<div class="results">
    <div class="result">
      <div class="description">
        <h4 class="category">{{categoryName}}
          <span class="date">
            {{date}}
          </span>
        </h4>
        <h4 class="name">{{title}}</h4>
      </div>
    </div>
</div>
{{/esEach }}

{{#esEach index="posts"}}
<div class="results">
    <div class="result">
      <div class="description">
        <h4 class="category">{{categoryName}}
          <span class="date">
            {{date}}
          </span>
        </h4>
        <h4 class="name">{{title}}</h4>
      </div>
    </div>
</div>
{{/esEach }}


// The helper from this template  --- app/client/templates/search.coffee
indexes: ->
    return ['Comments', 'Posts']

CSS

File Structure:
   app/server/search/easysearch.coffee
   app/client/search/easysearch_client.coffee

Same code on these two

Note:

The 'returnFields' will be the only fields from the document that easysearch will fetch for you. No need to fetch them all

JavaScript

// Code (A)

@Comments.initEasySearch(['title', 'body'], {
  'limit': 3,
  'use': 'mongo-db',
  'returnFields': ['title', 'categoryName', 'date']
})

@Posts.initEasySearch(['title', 'body'], {
  'limit': 3,
  'use': 'mongo-db',
  'returnFields': ['title', 'categoryName', 'date']
})