Conditional Display

Handling no results

When a query returns no results, it is important to let the user know that their query led to no results.

By doing so, the UI acknowledges that not all queries lead to some result and with some additional hints you can let them continue to use the search. This way, there is less chance that the user will leave the website to do a search on an external search engine.

There are various strategies that can be implemented for the no-result. This guide will walk you through one that can be easily implemented with InstantSearch.js:

• first you will improve the message that you provide to the user
• then you will add a button to let the user clear the filters

Display a message

By default, InstantSearch will only display “no results” when there are no results. The bare minimum to handle the no-result case is to provide the user with a message that indicates that no results were found in a friendly fashion.

In order to do that, you can add some logic inside the ais-hits template to detect if there are no hits:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ais-hits>
    <ng-template let-hits="hits" let-results="results">
        <!-- no results message -->
        <p class="info" *ngIf="hits.length === 0">
            No results were found for {{results.query}}.
        </p>

        <!-- hit template -->
        <div *ngFor="let hit of hits">
            Hit: {{hit.objectID}}
        </div>
    </ng-template>
</ais-hits>

When there are no results, the user will see a paragraph that says: “There are no hits found for: the current query”.

Let the user clear all the filters

To go further, you can also let the user clear the filters and start their search from scratch. This way, you allow the user to make mistakes.

In Angular InstantSearch it’s possible to use the ais-clear-refinements widget to add a button to clear the refinements if there are no hits. Note that we will add [clearsQuery]="true" to make sure the query will also be cleared, since it is not cleared by default. This is done similarly to the previous situation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ais-hits>
    <ng-template let-hits="hits" let-results="results">
        <!-- no results message -->
        <p class="info" *ngIf="hits.length === 0">
            No results were found for {{results.query}}.
            <ais-clear-refinements [clearsQuery]="true"></ais-clear-refinements>
        </p>

        <!-- hit template -->
        <div *ngFor="let hit of hits">
            Hit: {{hit.objectID}}
        </div>
    </ng-template>
</ais-hits>

Handling empty query

When you want to hide the results (or do something else) if the query is empty, you can use the ais-hits component, too.

1
2
3
4
5
6
7
8
9
10
<ais-hits>
    <ng-template let-hits="hits" let-results="results">
        <!-- no results message -->
        <div *ngIf="results.query && results.query.length > 0">
            <div *ngFor="let hit of hits">
                Hit: {{hit.objectID}}
            </div>
        </div>
    </ng-template>
</ais-hits>