Aurelia + Awesomplete (auto-complete), doing API lookups as user types

aurelia_awesomplete.txt

# start with es2016 skeleton
jspm install jquery
jspm install npm:awesomplete

welcome.html

<template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="options">Autocomplete</label>
        <input name="options" id="options" data-list.bind="options" selected.two-way="selected" placeholder="Select a github user..." value.two-way="selected" />
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>

welcome.js

//import {computedFrom} from 'aurelia-framework';
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';
import $ from 'jquery';
import * as Awe from 'awesomplete';
import 'awesomplete/awesomplete.css!'

// parts coopted from this gist: https://gist.github.com/Manuel-S/289a5c5cb2fdfbfbabce
const SELECT_COMPLETE = 'awesomplete-selectcomplete';

@inject(HttpClient)
export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  options = [];
  selected = null;
  minChars = 3;

  constructor(http) {
    http.configure(config => {
      config
        .useStandardConfiguration()
        .withBaseUrl('https://api.github.com/');
    });

    this.http = http;
  }

  submit() {
    alert(`you selected: ${this.selected}`);
    return false;
  }

  activate() {
    console.log('activate');

    this.selected="";
  }

  listener(e) {
    console.log("awesomplete listener");
    this.selected = e.target.value;
    //e.target.value = null;
  }

  attached() {
    this.input = document.getElementById("options");
    this.awe = new Awesomplete(this.input);
    this.awe.minChars = this.minChars;
    this.awe.maxItems = 20; // arbitrary limit

    var self = this;
    $(this.input).on("keyup", function(evt){
      var c = evt.keyCode;
      // ignore common control keystrokes
      if (~[13,27,33,34,37,38,39,40].indexOf(c))
        return;

      var value = this.value;
      console.log("Typed = " + value);
      if (value.length >= self.minChars) {
        console.log("Fetching filtered results...");
        self.http.fetch('search/users?q=' + value + "+in:login")
          .then(response => response.json())
          .then(results => {
            self.options = results.items.map(user => user.login);
            self.awe.list = self.options;
          });
      }
    });

    this.input.addEventListener(SELECT_COMPLETE, this.listener);
    console.log("awesomplete attached");
  }

  detached() {
    this.input.removeEventListener(SELECT_COMPLETE, this.listener);
    console.log("awesomplete detached");
  }
  
}