# 미리 입력

_By_ [_adamlubek_](https://github.com/adamlubek)

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

[![Ultimate RxJS](https://drive.google.com/uc?export=view\&id=1qq2-q-eVe-F_-d0eSvTyqaGRjpfLDdJz)](https://ultimatecourses.com/courses/rxjs?ref=4)

### 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)

```js
// 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**

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

### Operators Used

* [debounceTime](../operators/filtering/debouncetime)
* [distinctUntilChanged](../operators/filtering/distinctuntilchanged)
* [fromEvent](../operators/creation/fromevent)
* [map](../operators/transformation/map)
* [of](../operators/creation/of)
* [switchMap](../operators/transformation/switchmap)
* [tap](../operators/utility/do)
