debounceTime

wiki search with debounce

by Huy Le

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<input id='search'>

<section id='display'></section>

JavaScript

const wikiEndpoint = 'https://en.wikipedia.org/w/api.php?action=query&list=search&prop=info&inprop=url&utf8=&format=json&origin=*&srlimit=20&srsearch=';

const input = document.getElementById('search');

const example = Rx.Observable.fromEvent(input, 'keyup')
	.map(i => i.currentTarget.value)
	.debounceTime(500);
  
example
	.map(val => {
  	if (val.trim().length > 0) {
    	fetch(wikiEndpoint+val)
      	.then(r => r.json())
        .then(d => {
        	const results = d.query.search;
          const display = document.getElementById('display');
          display.innerHTML = "";
          results.forEach(result => 
            display.insertAdjacentHTML("beforeend",
              `<div>
                <h3>${result.title}</h3>
                <span>${result.snippet}</span>
              </div>`
            ));
        })
    }
	})
	.subscribe();