type-ahead.md

Type Ahead

By adamlubek

This recipe demonstrates the creation of type ahead client side code.

Example Code

( StackBlitz )

// RxJS v6+
import { fromEvent, of } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';

const getContinents = keys => [
  'africa',
  'antarctica',
  'asia',
  'australia',
  'europe',
  'north america',
  'south america'
].filter(e => e.indexOf(keys.toLowerCase()) > -1);

const fakeContinentsRequest = keys => of(getContinents(keys))
  .pipe(
    tap(_ => console.log(`API CALL at ${new Date()}`))
  );

fromEvent(document.getElementById('type-ahead'), 'keyup')
  .pipe(
    debounceTime(200),
    map((e: any) => e.target.value),
    distinctUntilChanged(),
    switchMap(fakeContinentsRequest),
    tap(c => document.getElementById('output').innerText = c.join('\n'))
  ).subscribe();

html

Get continents
<input id='type-ahead'/>
<hr/>
<div id='output'></div>

Operators Used

• debounceTime
• distinctUntilChanged
• fromEvent
• map
• of
• switchMap
• tap