title: How to achieve a debounce service on input keyup event in angular2 with rxjs
body: <p>I am trying to call to a service on input key-up event.</p>
  
  <p>The HTML</p>
  
  <pre><code>&lt;input placeholder="enter name" (keyup)='onKeyUp($event)'&gt;
  </code></pre>
  
  <p>Below is the <code>onKeyUp()</code> function</p>
  
  <pre><code>onKeyUp(event) {
      let observable = Observable.fromEvent(event.target, 'keyup')
          .map(value =&gt; event.target.value)
          .debounceTime(1000)
          .distinctUntilChanged()
          .flatMap((search) =&gt; {
              // call the service
          });
      observable.subscribe((data) =&gt; {
          // data
      });
  }
  </code></pre>
  
  <p>It was found from the network tab of the browser that, it is calling the key-up function on every key-up event(as it is supposed to do), but what I am trying to achieve is a debounce time of 1sec between each service call. Also, the event is triggered if I move the arrow key move. </p>
  
  <p><a href="http://plnkr.co/edit/2YOezky5qB2h4tzXojzi?p=info" rel="noreferrer">plunkr link</a></p>