debounceTime-api-request

/*
Our HTML
<div id="results"></div><br />
<input id="input" type='text' />
*/
/*
Our API call
*/
const fetchQuery = search => {
  return fetch(`https://www.reddit.com/r/${search}/.json?limit=10&show=all`)
    .then(res => res.json())
    .then(({data}) => {
      return data.children.map(image => image.data.url);
    })
};

const inputElement = document.querySelector('#input')
const resultsElement = document.querySelector('#results')
const $input = Rx.Observable.fromEvent(inputElement, 'input')
  .debounceTime(2000)
  .map(e => Rx.Observable.fromPromise(fetchQuery(e.target.value)))
  .flatMap(Rx.Observable.from)
  .map(response => response.reduce((acc,r) => acc + `<li>${r}</li>`, ''))

$input.subscribe(
  results => resultsElement.innerHTML = `<ul>${results}</ul>`
)