RxJS and Mithril Autocomplete Example

index.html

<div id="autocomplete"></div>

rxjs-and-mithril-autocomplete-example.markdown

RxJS and Mithril Autocomplete Example

An implementation of a Github autocomplete for repo names using RxJS and Mithril

A Pen by Timothy McKenna on CodePen.

License.

script.babel

var pluck = Rx.helpers.pluck;

var searchGithub = function(term) {
	return m.request({
    method: "GET",
    url: `https://api.github.com/search/repositories?q=${term}`
  });
};

var el = document.querySelector("#autocomplete");

var AutoComplete = {
  controller() {
    this.data = m.prop({});
    
    Rx.Observable.fromEvent(el, "keyup")
    	.map(pluck("target")) /* get element */
    	.filter(el => el.matches("input")) /* make sure it is the input */
    	.map(pluck("value")) /* get element's value */
    	.filter(val => val.length > 2) /* at least 3 chars */
    	.debounce(250) /* debounce it */
    	.distinctUntilChanged() /* ignore non character keyups */
    	.flatMapLatest(searchGithub) /* fire request */
    	.subscribe(this.data); /* set data prop with results */
  },
  view(ctrl) {
    var data = ctrl.data();
    
    return m(".autocomplete", [
      m("label[for=search]", ["Search for Github repo: "]),
      m("input#search[list=results]"),
      m("datalist#results", [
        data.items && data.items.map(item => m("option[value=" + item.name + "]"))
      ])
    ]);
	}
};

m.mount(el, AutoComplete);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.2/rx.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>