title: Multiple observables working together
body: <p>I have an input that as the user types it performs a real-time search. For example, let's say he has searched for the following:</p>
  
  <blockquote>
    <p>car</p>
  </blockquote>
  
  <p>The result would be:</p>
  
  <pre><code>[
    {
      id: "1"
      name: "Ferrari"
    },
    {
      id: "2"
      name: "Porsche"
    }
  ]
  </code></pre>
  
  <p>This I was able to do successfully, here is how:</p>
  
  <pre><code>class WordComponent {
    word: Subject&lt;string&gt; = new Subject&lt;string&gt;();
    result: any[] = [];
  
    constructor(private http: Http) {
      this.subscribe();
    }
  
    subscribe(): void {
      this.word.debounceTime(400)
        .distinctUntilChanged()
        .switchMap((word: string): Observable&lt;any[]&gt; =&gt; this.http.get(word))
        .subscribe((result: any[]): any[] =&gt; this.result = result);
    }
  
    search(event: any): void {
      this.word.next(event.target.value);
    }
  
  }
  </code></pre>
  
  <p>And the view:</p>
  
  <pre><code>&lt;input type="text" placeholder="Word" (keyup)="search($event)"&gt;
  </code></pre>
  
  <p>I want the user to be able to type multiple words at the same time and perform a real-time search for each word separately. For example, let's say he has searched for the following:</p>
  
  <blockquote>
    <p>car food sun</p>
  </blockquote>
  
  <p>The result for <strong>car</strong> would be:</p>
  
  <pre><code>[
    {
      id: "1"
      name: "Ferrari"
    },
    {
      id: "2"
      name: "Porsche"
    }
  ]
  </code></pre>
  
  <p>The result for <strong>food</strong> would be:</p>
  
  <pre><code>[
    {
      id: "3"
      name: "egg"
    },
    {
      id: "4"
      name: "cheese"
    }
  ]
  </code></pre>
  
  <p>The result for <strong>sun</strong> would be:</p>
  
  <pre><code>[
    {
      id: "5"
      name: "star"
    },
    {
      id: "6"
      name: "sky"
    }
  ]
  </code></pre>
  
  <p>And also merge the results of each word, in this case it would look like this:</p>
  
  <pre><code>[
    [{
        id: "1"
        name: "Ferrari"
      },
      {
        id: "2"
        name: "Porsche"
      }
    ],
    [{
        id: "3"
        name: "egg"
      },
      {
        id: "4"
        name: "cheese"
      }
    ],
    [{
        id: "5"
        name: "star"
      },
      {
        id: "6"
        name: "sky"
      }
    ]
  ]
  </code></pre>
  
  <p>But let's say that the user, after typing all the words and performing the search, wishes to change one of them. Only the search for the word that was changed needs to be redone, and the merge of the final result would also have to be redone.</p>
  
  <p>I still do not know all the features of rxjs and I do not know what would be the ideal way to achieve this. If you want a reference, the <a href="https://displaypurposes.com/" rel="nofollow noreferrer">Display Purposes</a> site has a very similar search engine.</p>