Back to home

The RxJS WayComparision
Autocomplete With RxJS main image

Autocomplete With RxJS

This is a short looking at subscribing to a particular keyup event using RxJS to determine when we should generate a basic autocomplete function (using JQuery - not exactly my recommendation in 2019).

The RxJS Way

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import $ from "jquery"; import Rx from "rxjs/Rx"; const $title = $("#title"); const $results = $("#results"); Rx.Observable.fromEvent($title, "keyup") .map((e) => e.target.value) .distinctUntilChanged() .debounceTime(500) .switchMap(getItems) .subscribe((items) => { $results.empty(); $results.append(items.map((r) => $(`<li />`).text(r))); });
  • All the Rx has no external state, whereas the other code does.
  • Rx doesn't have to wait for us to tell it when to do it.

Comparision

There are many bad ways this can be implemented in vanilla:

  • generally if last query == currentTitle return
  • using setTimeout to reduce number of queries
  • Race condition still happening, but bad attempts may be increasing the timeout - Could also use a current id compared to next query id and then returning before the callback occurs
  • A lot of state across the module being changed

However, that being said, the main race condition in vanilla can also be prevented by implementing a debounce function as well before calling an event handler. Note that the above Rx note still stands that in this particular application, we still need to "tell" the program when to call the event handler.

Dennis O'Keeffe

@dennisokeeffe92
  • Melbourne, Australia

Hi, I am a professional Software Engineer. Formerly of Culture Amp, UsabilityHub, Present Company and NightGuru.
I am currently working on workingoutloud.dev, Den Dribbles and LandPad .

Related articles


1,200+ PEOPLE ALREADY JOINED ❤️️

Get fresh posts + news direct to your inbox.

No spam. We only send you relevant content.