title: Angular + Firestore Autocomplete
body: <p>I have an autocomplete search bar on my website. It is built with Angular 7 and the information is coming from my Firestore database. Currently, the search bar is not filtering through the options when the user types. The onLoad() function should make one fetch into my <code>Schools</code> collection, and filter through that collection as the user types.</p>
  <p><strong>Code for the search bar</strong></p>
  <pre><code>      &lt;form&gt;
          &lt;mat-form-field style=&quot;width: 50vw; max-width: 400px;&quot; appearance=&quot;outline&quot;&gt;
            &lt;input matInput placeholder=&quot;Search schools...&quot; aria-label=&quot;School&quot; [matAutocomplete]=&quot;auto&quot; #schoolInput [(ngModel)]=&quot;searchModel&quot; (keyup.enter)=&quot;searchButton(schoolInput.value)&quot; name=&quot;inputField&quot; id=&quot;searchInput&quot;&gt;
            &lt;mat-icon class=&quot;searchIcon&quot; matSuffix style=&quot;color: #6336c6;&quot; (click)=&quot;searchButton(schoolInput.value)&quot;&gt;search&lt;/mat-icon&gt;
            &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot;&gt;
              &lt;mat-option *ngFor=&quot;let school of schools | async&quot; [value]=&quot;school.name&quot;&gt;
                &lt;span class=&quot;ui tiny header&quot;&gt;{{ school.name }}&lt;/span&gt;
                &lt;span *ngIf=&quot;school.country == 'United States'; then withState else withoutState&quot;&gt;&lt;/span&gt;
                &lt;ng-template #withState&gt;&lt;small&gt; {{school.city}}, {{school.state}}&lt;/small&gt;&lt;/ng-template&gt;
                &lt;ng-template #withoutState&gt;&lt;small&gt; {{school.city}}, {{school.country}}&lt;/small&gt;&lt;/ng-template&gt;
              &lt;/mat-option&gt;
              &lt;mat-option *ngIf=&quot;user&quot; (click)=&quot;openDialogAddSchool()&quot; style=&quot;font-style: italic; padding-bottom: 4px; margin-bottom: 12px;&quot;&gt;
                &lt;button class=&quot;ui basic fluid violet button&quot; style=&quot;margin-top:6px;&quot;&gt;&lt;i class=&quot;plus icon&quot;&gt;&lt;/i&gt;Add school&lt;/button&gt;
              &lt;/mat-option&gt;
            &lt;/mat-autocomplete&gt;
          &lt;/mat-form-field&gt;
        &lt;/form&gt;
  </code></pre>
  <p><strong>TS Code so far</strong></p>
  <pre><code>fetchSchools(){
  
      this.schoolsCollection = this.afs.collection('Schools', ref =&gt; {
        return ref.orderBy('name');
      });
  
      this.schools = this.schoolsCollection.valueChanges();
  
      console.log('Retreived schools:');
      console.log(this.schools);
  
    }
  </code></pre>
  <p><strong>Response</strong>
  Retreived schools:</p>
  <pre><code>page-home.component.ts:308 Observable {_isScalar: false, source: Observable, operator: MapOperator}
  </code></pre>
  <p><a href="https://i.stack.imgur.com/sVIQk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sVIQk.png" alt="enter image description here" /></a></p>