title: How can I filter an Observable onKeyUp?
body: <p>How do I search / filter observable of type string array ? </p>
  
  <p>For example , I have following observable</p>
  
  <pre><code>names$ = Observable.of(['Lenovo','Dell','Toshiba','Apple','Microsoft']);
  </code></pre>
  
  <p>Now I would like to filter this observable based on what user types in the input textbox.</p>
  
  <p>So I have following code &amp; I would like to return filtered observable based on user's searchTerm typed in the input box.</p>
  
  <p>Please note that I am looking for client side solution. I have the data already on the clientside &amp; for some reason I cannot send search term on server to filter the data. I also understand that in this example I can directly use filter on array itself but I want to do this through observable.</p>
  
  <p>I also tried flatmap operator to flatten the array but still was not able to return the observable in the end which should be of type string array.</p>
  
  <p>Any help will be greatly appreciated. Thanks in advance.</p>
  
  <p><strong>App.component.html</strong></p>
  
  <pre><code>&lt;!-- Textbox to receive user input --&gt;
  Search:&lt;input type='text' [(ngModel)]='searchTerm' (keypress)='onkeypress($event.target.value)'&gt;
  &lt;p&gt;Search Term: {{searchTerm}}&lt;/p&gt;
  &lt;hr&gt;
  
  &lt;!-- Show search results here as ordered list --&gt;
  &lt;ng-container *ngIf='(names$|async)?.length&gt;0'&gt;
      &lt;ol&gt;
          &lt;li *ngFor='let name of names$|async'&gt;
              {{name}}
          &lt;/li&gt;
      &lt;/ol&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p><strong>App.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {Observable} from 'rxjs';
  
  @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
      names$: Observable&lt;string[]&gt;;
      filteredNames$: Observable&lt;string[]&gt;;
      searchTerm: string;
  
      ngOnInit() {
          this.names$ = Observable.of(['Lenovo', 'Dell', 'Toshiba', 'Apple', 'Microsoft']);
      }
  
      // HOW TO IMPLEMENT THIS FUNCTION ??
      onkeypress(value) {
          console.log(value);
          this.names$ = this.names$.map(names =&gt; names.indexOf(value) &gt; 0)
          // .filter(x=&gt;{console.log(x.indexOf(value));return x.indexOf(value)&gt;0})
          //     .subscribe(
          // (data)=&gt;console.log(data),      (error)=&gt;console.log('Error'+error),
          //       ()=&gt;console.log('complete'));
      }
  }
  </code></pre>