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 display = document.getElementById('display');

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 => {
          display.innerHTML = "";
          
        	d.query.search
          	.forEach(result => 
            	display.insertAdjacentHTML("beforeend",
                `<div>
                  <h3>${result.title}</h3>
                  <span>${result.snippet}</span>
                </div>`));
        });
    }
	})
	.subscribe();