CODEWITHSUNDEEP
searchalgolia
Jonathan Prieto-Cubides
Jonathan Prieto-Cubides

Reputation: 2847

Show the item hit content only when the search box is not empty

I have this in my algolia file for my jekyll site.

<script>
const search = instantsearch({
  appId: '{{ site.algolia.application_id }}',
  apiKey: '{{ site.algolia.search_only_api_key }}',
  indexName: '{{ site.algolia.index_name }}',
  searchParameters: {
    restrictSearchableAttributes: [
      'title',
      'content'
    ],
    facetFilters: ['type:post']
  },
});

const hitTemplate = function(hit) {
  let date = '';
  if (hit.date) {
    date = moment.unix(hit.date).format('L');
    // date = moment.unix(hit.date).format('MMM Do YY');
    modifiedDate = moment.unix(hit.last_modified_at).format('MMM Do YY');
  }
  const url = hit.url;
  const title = hit._highlightResult.title.value;
  const content = hit._highlightResult.html.value;

  return `
    <div class="post-list">
      <span class="post-date-list-wrap">
      <span class="post-date-list">${date}
      <span class="post-title"><a href=".${url}"> ${title} </a> </span>
      </span>
       ${content}
    </div>
  `;
}

const hitTemplateTrans = function(hit) {
  let date = '';
  if (hit.date) {
    date = moment.unix(hit.date).format('MMM DD YYYY');
  }
  const url = hit.url;
  const title = hit._highlightResult.title.value;
  const content = hit._highlightResult.html.value;

  return `
    <div class="post-list">
      <span class="post-date-list-wrap">
      <span class="post-date-list">${date}
        <span class="post-title"><a href=".${url}"> ${title}</a></span>
       </span>
       </span>
    </div>
  `;
}

search.addWidget(
  instantsearch.widgets.searchBox({
    container: '#search-searchbar',
    placeholder: 'search notes',
    autofocus: true
  })
);

search.addWidget(
  instantsearch.widgets.hits({
    container: '#search-hits',
    templates: {
      empty: 'No results',
      item: hitTemplate
    },
  })
);

search.start();
</script>

Without typing anything in the search box I have the list of articles with the excerpt, the short introduction of the article. That's because I have ${content} to show the highlights when someone types the search term.

That's fine and everything is working but... I don't want to show the contents of each item when the search box is empty. If the search box is empty I would like to keep only the title and the date but if the search box is not empty just show the title/date and the excerpt as it's usual.

It seems like an easy task but I'm stuck right now, I tried removed the content tag and put in the hit transformation function, but it doesn't work.

Upvotes: 0

Views: 714

Answers (1)

pixelastic
pixelastic

Reputation: 5278

The instantsearch.js library has a function hook, called searchFunction, you can define when instanciating the library. That is called right before any search is performed. You can use it to check if the current query is empty or not, and adapt your layout based on this knowledge.

Here is a slightly edited script (irrelevant parts removed) that should let you do what you're looking for:

let additionalClass = '';
const search = instantsearch({
  […]
  searchFunction: function(helper) {
    if (helper.getState().query === '') {
      additionalClass = 'post-item__empty-query';
    } else {
      additionalClass = '';
    }
    helper.search()
  }
});

[…]

const hitTemplate = function(hit) {
  return 
    `<div class="post-item ${additionalClass}">
        […]
    </div>`
  ;
}

.post-item__empty-query .post-snippet {
  display: none;
}

What it does is defining a global variable (additionalClass) that will be used in the hit template (added alongside item-post, at the root level).

Right before everysearch, we check if the query is empty. If so, we set additionalClass to item-post__empty_query. We also defined in CSS that when this class is applied, the content should be hidden.

All of that together makes the title + date displayed when no search is performed, and the content displayed only when an actual keyword is searched for.

Hope that helps,

Upvotes: 4

Related Questions