# Type Ahead

*By* [*adamlubek*](https://github.com/adamlubek)

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

## Example Code

( [StackBlitz](https://stackblitz.com/edit/rxjs-type-ahead?file=index.ts\&devtoolsheight=50) )

![Typeahead](https://drive.google.com/uc?export=view\&id=1TdDA78dkiy5lC8A3Rz28oDq9SuaxsS45)

```javascript
// 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

```markup
Get continents
<input id="type-ahead" />
<hr />
<div id="output"></div>
```

## Operators Used

* [debounceTime](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/filtering/debouncetime)
* [distinctUntilChanged](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/filtering/distinctuntilchanged)
* [fromEvent](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/creation/fromevent)
* [map](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/transformation/map)
* [of](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/creation/of)
* [switchMap](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/transformation/switchmap)
* [tap](https://junwoo45.gitbook.io/learn-rxjs-korean/learn-rxjs/recipes-1/utility/do)