Autocomplete
Suggestions as the user types — from configured suggest queries on the server, and from the user's own recent/saved searches and bookmarks.
Two independent sources feed a search box's suggestions: AutocompleteService asks the server's configured
suggest queries, and separately reads the user's own history (recent/saved searches, bookmarks) client-side.
Minimal example
import { Component, inject, signal } from "@angular/core";
import { AutocompleteService } from "@sinequa/atomic-angular";
@Component({
selector: "search-box",
template: `<input (input)="onInput($any($event.target).value)" aria-label="Search" />`,
})
export class SearchBoxComponent {
private readonly autocomplete = inject(AutocompleteService);
protected readonly suggestions = signal<string[]>([]);
protected async onInput(text: string) {
// One array per configured suggest query; flatten for a single list.
const groups = await this.autocomplete.getFromSuggestQueriesForText(text);
this.suggestions.set(groups.flat().map((suggestion) => suggestion.display ?? suggestion.normalized));
}
}Recipes
Mixing in the user's own history
import { Component, inject } from "@angular/core";
import { AutocompleteService } from "@sinequa/atomic-angular";
@Component({
selector: "search-box",
template: ``,
})
export class SearchBoxComponent {
private readonly autocomplete = inject(AutocompleteService);
protected onInput(text: string) {
// Synchronous — no request, since the source is already in memory.
const fromHistory = this.autocomplete.getFromUserSettingsForText(text, 5);
console.log(fromHistory);
}
}getFromUserSettingsForText groups its results by recent-searches, saved-searches and bookmarks — enough
to render each group under its own heading, or to merge and cap them, as the caller prefers.
Options
Prop
Type
What's next
Query
Run a search, tell a failed request apart from a genuine zero results, and page through a result — the service every result-rendering component in this library sits on top of.
Did You Mean
Turn a result's spelling correction into the right message — the engine corrected the query, expanded it, or only suggests a correction — and let the user switch between the two spellings.