Angular autocomplete searching with Observables

Question

I'm trying to make an autocomplete using Observables but I'm getting an error that says

Property 'filter' does not exist on type 'Observable<Entity[]>'

How can I make an autocomplete based on what I made? (I was thinking of using .pipe() but I don't really understand it

Here is what I tried:

.ts

  entity$: Observable<Entity>;
  entities$: Observable<Entity[]>;

  inputEntity = new FormControl();
  autocompleteEntities: Entity[] = [];
  subEntityText: Subscription;

  constructor(
    private userProvider: UserProvider,
    private entityProvider: EntityProvider,
    private cd: ChangeDetectorRef
  ) {}

  ngOnInit() {
    this.userProvider.user$.subscribe((user: User) => {
      this.entities$ = this.entityProvider.getAll(user.uid); # GET ENTITIES BASED ON USER UID
    });

    this.subEntityText = this.inputEntity.valueChanges.subscribe((query: string) => {
      if (query === '') {
        this.entity$ = null;
      } else {
        this.autocompleteEntities = this.searchEntity(query);
        this.cd.detectChanges();
      }
    });
  }

  searchEntity(query: string): Entity[] {
    if (query === '') return [];

    const queryRegExp = new RegExp(query, 'i');

    return this.entities$
      .filter(char => queryRegExp.test(char.name))
      .sort((a, b) => a.name.length - b.name.length);
  }

.html

<input
  type="text"
  [formControl]="inputEntity"
  [matAutocomplete]="auto"
/>

<mat-autocomplete #auto="matAutocomplete" class="option-autocomplete" autoActiveFirstOption>
    <mat-option class="option" *ngFor="let entity of autocompleteEntities" [value]="entity">
        <div class="option-character">
          <span class="option-character-name">{{entity.name}}</span>
        </div>
    </mat-option>
</mat-autocomplete>

Thanks in advance

Did you try `this.entities$.pipe(filter(char => queryRegExp.test(char.name)), sort((a, b) => a.name.length - b.name.length))` ? — Shumail, Aug 14 '19 at 13:13
@Shumail Yes, but I get the following error: `Type 'Observable' is missing the following properties from type 'Entity[]': length, pop, push, concat, and 25 more.ts(2740)` — Kevin Malone, Aug 14 '19 at 13:15

score 1 · Accepted Answer · answered Aug 14 '19 at 13:17

1

You need to return an observable, see also How do I return the response from an asynchronous call?.

You could use map operator to filter and sort the response. There are other options as well.

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

searchEntity(query: string): Observable<Entity[]> {
    if (query === '') return of([]);

    const queryRegExp = new RegExp(query, 'i');

    return this.entities$
      .pipe(map((entities) => {
        return entities
            .filter(char => queryRegExp.test(char.name))
            .sort((a, b) => a.name.length - b.name.length)
      }));
  }

answered Aug 14 '19 at 13:17

Igor

60,821
10
100
175

I get no errors for this function, however `this.autocompleteEntities` returns the following error now `Type 'Observable' is missing the following properties from type 'Entity[]': length, pop, push, concat, and 25 more.ts(2740)` – Kevin Malone Aug 14 '19 at 13:19
@KevinMalone - sounds like your server is not returning an array **or** your angular service method signature `entityProvider.getAll` is not defined as returning an array. – Igor Aug 14 '19 at 13:20
@KevinMalone - glad to hear it and glad to help. – Igor Aug 14 '19 at 13:24

Angular autocomplete searching with Observables

1 Answers1