JSFiddle - React, Tailwind, and code Playground

by hjjunior

HTML

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<input type="text" id="textbox"/>
<textarea id="textarea"></textarea>

Babel + JSX

const { Observable, fromEvent, scheduler, from, of } = rxjs
const { debounce, map, last, retry, merge, switchMap, distinctUntilChanged, tap, flatMap } = rxjs.operators


const textbox = document.getElementById('textbox')
const textarea = document.getElementById('textarea')
const keyPresses = fromEvent(textbox, 'keypress')


const wikipediaSearch = searchTerm => {
  return $.ajax({
    url: 'https://en.wikipedia.org/w/api.php',
    dataType: 'jsonp',
    data: {
      action: 'opensearch',
      format: 'json',
      search: searchTerm
    }
  }).promise();
}

var searchResultsSets = keyPresses.pipe(
	map(event => event.target.value),
  // distinctUntilChanged(),
	// debounce(750),
  flatMap(wikipediaSearch)
)


searchResultsSets.subscribe(
	search => textarea.value = JSON.stringify(search),
  error => alert('something gona wrong! (' + JSON.stringify(error) + ')'),
  () => alert('You have done')
)