title: How to make an async autocomplete in Angular 6 (rxjs 6), which does not show any irrelevant data by fast typing
body: <p><strong>What i have now:</strong> I have a custom autocomplete implementation, looks like this in html:</p>
  
  <pre><code>&lt;input [formControl]="parentFormControl"
         (mouseup)="autocomplete()"
         (input)="autocomplete()"&gt;
  
  &lt;ul *ngIf="showAutocompleteList"&gt;
    &lt;li *ngFor="let listItem of autocompleteList; let index = index;"&gt;
      &lt;a role="option" href="#" type="button" (mousedown)="select(listItem)" [innerHtml]="highlight(listItem)"&gt;&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>parentFormControl is the value behind the input (the modal so to speak), and is a FormControl. So this encapsulates the text which is displayed in input, and submitted with the submit button.</p>
  
  <p>Now everytime i type or click in input, the function autocomplete is called, and makes a normal async call with subscribe:</p>
  
  <pre><code>  autocomplete(): void {
      if (this.autocompleteSubscription) {
        this.autocompleteSubscription.unsubscribe();
      }
      this.autocompleteSubscription = this.http.get('url').subscribe(
        (autocompleteList:  Array&lt;OptionItem&gt;) =&gt; {
          this.autocompleteList = autocompleteList;
        }
      );
    }
  </code></pre>
  
  <p>I actually do not have any delay for the aysnc call, so everytime user types, I call the backend immediately. But imagine that user types 'Software', I of course do not want to display any irrelevant results. For example we typed 'Soft', and the XHR call is fired. We continue typing and typed 'Softw', another XHR call is fired, before the first call finished its job. So i actually immediately cancel the first execution, since it is not relevant anymore. That's why everytime the autocomplete function is called, i call the unsubscribe of the previous subscription. </p>
  
  <p><strong>Question:</strong> Is this the way i should implement my autocomplete behaviour? I have seen tooday an artical about the exact same thing, but they implement this behaviour with a detailed (or pure?) rxjs, with Pipes. this is the link:
  <a href="https://blog.strongbrew.io/building-a-safe-autocomplete-operator-with-rxjs/" rel="nofollow noreferrer">https://blog.strongbrew.io/building-a-safe-autocomplete-operator-with-rxjs/</a></p>
  
  <p>I have also seen other examples which are pipes, but they also have in their html for me a bit foreign syntax like '{{ text$ | async }}'.</p>
  
  <p>So i wanted to be sure, whether what i have now (subscribe &amp; unsubcribe) is a good way of achieving what I want? Or should i really change the implementation and implement sth like what they have? Which side has which pros and cons?</p>
  
  <p>And if i should switch my implementation, can you provide an example code with my formControl as model?</p>
  
  <p>Thanks in advance</p>
  
  <p>Edit:</p>
  
  <p>I now have sth like this:</p>
  
  <pre><code>  ngOnInit(): void {
      this.parentFormControl.valueChanges
        .pipe(
          debounceTime(1000),
          distinctUntilChanged(),
          filter(value =&gt; this.myGetRequestCondition() ? true : false),
          switchMap((value: string) =&gt;  {
              return this.http.get('url' + value)
                .pipe(catchError(err =&gt; {
                   this.myErrorFunction(err);
                   return EMPTY;
                }));
          }))
        .subscribe(autocompleteList =&gt; {
          this.autocompleteList = autocompleteList;
        });
    }
  </code></pre>