If you're interested in implementing autocomplete using an array instead of an in-memory web API, check out this thread for an example:
Here's the updated search function in autocomplete.service.ts:
search(filter: {name: string} = {name: ''}, page = 1): Observable<IUserResponse> {
this.commune = {
total: 4,
results: [
{ id: 1, name: 'Windstorm' },
{ id: 2, name: 'Bombasto' },
{ id: 3, name: 'Magneta' },
{ id: 4, name: 'Tornado' },
{ id: 5, name: 'Agnosto' }
]
}
return of<IUserResponse>(this.commune)
.pipe(
tap((response: IUserResponse) => {
response.results = response.results
.map(user => new User(user.id, user.name))
.filter(user => user.name.includes(filter.name))
return response;
})
);
}
This is how the search function is utilized with finalize to intercept observables from http requests:
async ngOnInit() {
this.usersForm = this.fb.group({
userInput: null
})
this.usersForm
.get('userInput')
.valueChanges
.pipe(
debounceTime(300),
tap(() => { this.isLoading = true }),
switchMap(value => this.autocompleteService.search({ name: value }, 1)
.pipe(
finalize(() => { this.isLoading = false }),
)
)
)
.subscribe(users => this.filteredUsers = users.results);
}