mujimu · February 5, 2016 05:42 · Feb 5, 2016
diff --git a/aurelia_awesomplete.txt b/aurelia_awesomplete.txt
@@ -0,0 +1,3 @@
+# start with es2016 skeleton
+jspm install jquery
+jspm install npm:awesomplete
diff --git a/welcome.html b/welcome.html
@@ -0,0 +1,12 @@
+<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>
diff --git a/welcome.js b/welcome.js
@@ -0,0 +1,81 @@
+//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");
+  }
+
+}