I'm trying to hide an element (no-results-wrapper) if there are no search results displayed. My goal is that when you first open the search bar this element will display, and if there are no search results this element will display. Right now I've figured out how to do that, except when there are search results the element (no-results-wrapper) still displays at the very bottom of the results. I do not want the element to appear if there are search results.
I've tried wrapping the element in {% if search.terms == blank %} however that did not work. Any help would be appreciated.
{%- if settings.basel_search_widget != 'disable' -%}<div class="search-button basel-search-{{settings.basel_search_widget}}"><a href="#"><i class="fa fa-search"></i></a><div class="basel-search-wrapper"><div class="basel-search-inner"><span class="basel-close-search">{{ 'general.search.close_search' | t }}</span><form role="search" method="get" class="searchform{%- if settings.ajax_search %} basel-ajax-search{%- endif -%}" action="/search"><div><label class="screen-reader-text"></label><input type="text" placeholder="{{ 'general.search.placeholder' | t }}" value="{{ search.terms | escape }}" name="q" autocomplete="off">
{%- if settings.only_search_products -%}<input type="hidden" name="type" value="product" />{%- endif -%}<button type="submit">{{ 'general.search.submit' | t }}</button></div></form><div class="search-results-wrapper"><div class="basel-search-results"><div class="autocomplete-wrapper"><div class="autocomplete-suggestions" style="position: absolute; max-height: 300px; z-index: 9999;"></div>
{% if search.terms == blank %}
<div class="no-results-wrapper"><div class="search-bar-item"><div class="canvas ratio-2-3"><div class="product-image-color-overlay" style="z-index: 10; background-color: #efefef;"><div class="display-table"><div class="display-table-cell"><div class="search-bar-no-result-item"><p>HMMM...</p><p>NOT SURE WHAT YOU’RE
LOOKING FOR?</p><p><a href="#">Shop New Arrivals</a><a href="#">Shop Latest</a></p></div></div></div></div></div></div><div class="search-bar-item"><a href="#"><div class="canvas ratio-2-3"><div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div><div class="product-image-color-overlay"></div></div><div class="product-card-details"><div class="product-card-title">One-Pieces</div></div></a></div><div class="search-bar-item"><a href="#"><div class="canvas ratio-2-3"><div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div><div class="product-image-color-overlay"></div></div><div class="product-card-details"><div class="product-card-title">New Arrivals</div></div></a></div><div class="search-bar-item"><a href="#"><div class="canvas ratio-2-3"><div class="image-over-canvas bkg-image-focus-center-top" style="background-image: url('//cdn');"></div><div class="product-image-color-overlay"></div></div><div class="product-card-details"><div class="product-card-title">Holiday</div></div></a></div></div>
{% endif %} </div></div></div></div></div></div>
{%- endif -%}