How do I set the custom autocomplete to search after the first key press?

I have created a custom autocomplete using the Algolia guide ( Autocomplete Angular ) works correctly, however I get results by clicking on the text box, and I want to display results after the first keypress.
I want to do this since I will show some default Items that will not come from the database.
To do this second part I will use a conditional approach

<div *ngIf="state.indices && state.indices.length > 0; else default">
    <mat-option *ngFor="let option of state.indices[0].hits" [value]="option.name_es"
      (click)="onQuerySuggestionClick.emit(option.code)">
      {{ option.name }}
    </mat-option>
  </div>
<ng-template #default> ......Defaults...... </ng-template>

Hi there,

If I understand your request correctly, you want to only perform an autocomplete search when there is a query in your searchbox, and not if the searchbox is empty.

I think you can achieve what you’re trying to achieve by altering your handleChange method. According to the tutorial you’ve sent, the code for that is:

  public handleChange($event: KeyboardEvent) {
    this.state.refine(($event.target as HTMLInputElement).value);
  }

You can add a check around this.state.refine to only perform the search when the query is not empty. This would look something like this:

  public handleChange($event: KeyboardEvent) {
    const query = ($event.target as HTMLInputElement).value
    if (query !== '') {
        this.state.refine(query);
    }
  }

This will prevent a refinement from happening when the query is empty (someone clicks on the search box for the first time).

I hope this helps!

Cheers,
Devin.

Thanx for your response, as I mention in the question I want to filter the data that I show in the client by category, each item in the hits has a type property.

state.indices[0].hits.filter(i => i.type == 1)

I’ve read about “Helper” but don’t know how to mix it with the state.refine I think is where the filter would be placed.

Doesnt work, you can try in CodeSandBox. Always search when you click in the box, doesnt exist a property for this?

Hi there,

I’ve modified the example here.

So I split config into one for autocomplete and another one for the other part.
In the autocomplete config, I added searchFunction which prevents a search with an empty query.

Let me know if this works for you :slight_smile:

Thanxs, its works, Where should I put the category filter I mentioned?
I can see the SearchFuncitions, I want to eliminate some results that are of the category that I require, the filter is simple what I do not know is where I should place it