title: Angular4 AutoComplete running extremely slow, how do I speed it up
body: <p>I'm building a form on my website that allows users to search for clients from a database, to do this I'm pre-loading the clients and then setting an angular 4 autocomplete component to use the list of clients, however it runs extremely slow when rendering the dropdown. I've determined this is because there are just so many results to show, often-times 6000+.</p>
  
  <p>Is there a way to have the autocomplete use a custom function I've built that waits till it determines the user is finished typing before returning results, right now I'm using the exact same code shown in angulars examples.</p>
  
  <p>Here is the TS code behind the component:</p>
  
  <pre><code>this.filteredCustomers = this.customerControl.valueChanges
              .startWith(null)
              .map(val =&gt; val ? this.filterCustomers(val) : null);
  
  filterCustomers(val: string): any {
          return this.agencyCustomers.filter(function (item: any) {
              var n = item.Name.trim().toLowerCase();
              return (n.search(val) &gt;= 0);
          });
      }
  </code></pre>
  
  <p>And here is the html:</p>
  
  <pre><code>&lt;md-autocomplete #customers="mdAutocomplete"&gt;
                      &lt;md-option *ngFor="let customer of filteredCustomers | async" [value]="customer.Name" [innerText]="customer.Name" (onSelectionChange)="customerChanged(customer, transaction)"&gt;
                      &lt;/md-option&gt;
                  &lt;/md-autocomplete&gt;
  </code></pre>
  
  <p>Any help is greatly appreciated.</p>