Angular instant search only show hits when enter is pressed or with the search icon is pressed

Question

I only want the hits returned from Algolia to display when the user presses enter or if they hit the search icon on the input. I have got it so that only the specific hits are shown on enter using searchAsyouType = false:

<ais-search-box [searchAsYouType]=false  ></ais-search-box>

However the problem is that when nothing is entered all of the hits are displayed by default as shown below:

this is my code:

<ais-instantsearch [config]="searchConfig" >

  <ais-search-box [searchAsYouType]=false  ></ais-search-box>

  <ais-hits >
    <ng-template let-hits="hits">
      <div *ngFor="let hit of hits">

        <div class="bio">
          hit: {{ hit.post_code }}
        </div>

      </div>
    </ng-template>
  </ais-hits>
</ais-instantsearch>

Anyone had this issue before? How do I hide all hits until enter/search icon is pressed?

if the event is catched when the user empty the search bar you can assign this.hits = null — Jacopo Sciampi, Mar 01 '19 at 11:05
Can't you validate whether the input-element where the user inserts his input is empty or not, and show (with *ngIf) the hits only if it is not? — Subhan Asadli, Mar 01 '19 at 11:12

score 0 · Answer 1 · edited Jun 10 '20 at 14:23

0

The false should be "false". Or just remove the tag as the default is "false". That would leave you with:

<ais-search-box></ais-search-box>

edited Jun 10 '20 at 14:23

David Buck

3,752
35
31
35

answered Jun 10 '20 at 13:55

MurrayST

1

Angular instant search only show hits when enter is pressed or with the search icon is pressed

1 Answers1