from

RxJS 5 from

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<from>
  <input id="search-input" type="text" />
</from>

<h4>
Result:
</h4>
<ul id="result-container">

</ul>

JavaScript

const inputText = document.querySelector('#search-input')
const resultContainer = document.querySelector('#result-container')

const sendRequest = (query) => {
	return fetch(`https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&utf8=1&srsearch=${query}`)
};

const search$ = rxjs.fromEvent(inputText, 'keyup')
.pipe(
  rxjs.operators.pluck('target', 'value'),
  rxjs.operators.debounceTime(1000),
  rxjs.operators.switchMap(query => {
  	return rxjs.from(sendRequest(query))
    	.pipe(
      	rxjs.operators.flatMap(res => res.json()),
      	rxjs.operators.pluck('query', 'search'),
        rxjs.operators.map(res => {
        	return res.reduce(
        	(acc, cur) => {
        		return acc.concat(cur.title);
        	}, []);
        }
       ), rxjs.operators.catchError(err => rxjs.of([])))
  })
)
search$.subscribe(res => {
	clearResults(resultContainer)
  
  if(res && res.length > 0) {
  	res.map(el => appendResult(el, resultContainer))     
 	} 
})
  
  
  
function clearResults(container) {
console.warn(container)
  while(container.childElementCount > 0) {
  	container.removeChild(container.firstChild);
  }
}  
function appendResult(result, container) {
 let li = document.createElement('li');
  let text = document.createTextNode(result);
  
  li.appendChild(text);
   container.appendChild(li);
}