Hiding DIVs if hits are empty when using InstantSearch.js

I am wondering if it is possible to hide specific divs throughout a page if the number of hits returned are 0?

For example, I am using the menuSelect widget multiple times to create a series of refinement menus. These are sitting within a div that has a heading that encapsulates a user’s actionable options for that block. Like this:

26 AM

When a user searches for something that does not exist (hits = 0), the menuSelects disappear as expected but I would also like to remove the ‘Refine your results’ title and the div that wraps this whole section. Here is what it currently looks like when no results are returned:

34 AM

Here’s the code that I have:

search.js

// initialize menuSelects
search.addWidget(
  instantsearch.widgets.menuSelect({
    container: '#grades-select',
    attributeName: 'grades.name',
    templates: {
      header: 'Grade',
    },
    cssClasses: {
      header: 'list_header',
    },
    autoHideContainer: true
  })
);
search.addWidget(
  instantsearch.widgets.menuSelect({
    container: '#subjects-select',
    attributeName: 'subjects.name',
    templates: {
      header: 'Subject',
    },
    cssClasses: {
      header: 'list_header',
    },
    autoHideContainer: true
  })
);
search.addWidget(
  instantsearch.widgets.menuSelect({
    container: '#units-select',
    attributeName: 'units.name',
    templates: {
      header: 'Unit',
    },
    cssClasses: {
      header: 'list_header',
    },
    autoHideContainer: true
  })
);

// initialize infiniteHits
search.addWidget(
  instantsearch.widgets.infiniteHits({
    container: '#infinite-hits-container',
    templates: {
      empty: '<div class="alert alert-info" role="alert"><h4 class="alert-heading">Sorry!</h4><p style="font-size:1.15em;">We do not currently have any resources matching that search. Why not <a href="/resources/upload" style="font-weight:700;">upload a resource</a> and help out the community?</p><p class="mb-0"></p><div class="col-sm-12 text-center"><a href="/resources" class="btn btn-info" role="button" style="color:#fff !important;">Start search over</a></div></div>',
      item: semanticHitTemplate
    },
    cssClasses: {
      root: 'row',
      item: ['col-md-4 col-sm-6'],
    },
    escapeHits: false,
    showMoreLabel: 'Show more Resources',
  })
);

page (html)

<div class="whitefill square-bottom settings-content">
  <div class="ui grid">
    <div class="sixteen wide column">
      <h4>Refine your results</h4>

        <div class="ui one column grid">
          <!-- Grades select -->
          <div id="grades-select"></div>
          <!-- Subjects select -->
          <div id="subjects-select"></div>
          <!-- Units select -->
          <div id="units-select"></div>
        </div>
      </div>
      <div class="sixteen wide column right aligned">
        <div id="stats" class="text-muted"></div>
      </div>
    </div>
  </div>

How could I remove the whitefill square-bottom settings-content div (for example) if there are no ‘hits’ returned?

Hi @sheldon,

You can listen to the results by using the inner state management called the helper. You should listen to the result event and if there are results you change the style of the title to display: block otherwise you use display: none. Here is a simple example:

// ... the rest of your implementation

search.start();

search.helper.on('result', function(res) {
  const title = document.querySelector('.hide-when-no-result');
  if (res && res.hits && res.hits.length > 0) {
    title.style.display = 'block';
  } else {
    title.style.display = 'none';
  }
});

See the demo on jsFiddle.

NB: you can access the helper only after the search has been started

1 Like

Absolutely brilliant! Thanks for the solution! :smile:

1 Like