feat(md-autocomplete): add autocomplete, closes #209

src/autocomplete/autocomplete.js

@@ -0,0 +1,45 @@
+import {bindable, customAttribute} from 'aurelia-templating';
+import {inject} from 'aurelia-dependency-injection';
+import {fireEvent} from '../common/events';
+
+@customAttribute('md-autocomplete')
+@inject(Element)
+export class MdAutoComplete {
+  input = null;
+  @bindable() values = {};
+
+  constructor(element) {
+    this.element = element;
+  }
+
+  attached() {
+    if (this.element.tagName.toLowerCase() === 'input') {
+      this.input = this.element;
+    } else if (this.element.tagName.toLowerCase() === 'md-input') {
+      this.input = this.element.au.controller.viewModel.input;
+    } else {
+      throw new Error('md-autocomplete must be attached to either an input or md-input element');
+    }
+    this.refresh();
+  }
+
+  detached() {
+    // remove .autocomplete-content children
+    $('.autocomplete-content', this.element).off('click');
+    $('.autocomplete-content', this.element).remove();
+  }
+
+  refresh() {
+    this.detached();
+    $(this.input).autocomplete({
+      data: this.values
+    });
+    $('.autocomplete-content', this.element).on('click', () => {
+      fireEvent(this.input, 'change');
+    });
+  }
+
+  valuesChanged(newValue) {
+    this.refresh();
+  }
+}

src/config-builder.js

@@ -9,6 +9,7 @@ export class ConfigBuilder {
 
   useAll(): ConfigBuilder {
     return this
+      .useAutoComplete()
       .useBadge()
       .useBox()
       .useBreadcrumbs()
@@ -47,6 +48,11 @@ export class ConfigBuilder {
       .useWell();
   }
 
+  useAutoComplete(): ConfigBuilder {
+    this.globalResources.push('./autocomplete/autocomplete');
+    return this;
+  }
+
   useBadge(): ConfigBuilder {
     this.globalResources.push('./badge/badge');
     return this;

src/input/input.html

@@ -3,7 +3,7 @@
   <div class="input-field">
     <!-- <content select="[md-prefix]"></content> -->
     <slot></slot>
-    <input if.bind="mdTextArea === false" id="${controlId}" type.bind="mdType" ref="input" value.bind="mdValue" disabled.bind="mdDisabled"/>
+    <input if.bind="mdTextArea === false" id="${controlId}" type.bind="mdType" ref="input" value.bind="mdValue" disabled.bind="mdDisabled" />
     <textarea if.bind="mdTextArea === true" id="${controlId}" ref="input" value.bind="mdValue" class="materialize-textarea" disabled.bind="mdDisabled"></textarea>
     <label for="${controlId}" ref="label">${mdLabel}</label>
   </div>

src/input/input.js

@@ -29,6 +29,8 @@ export class MdInput {
     defaultBindingMode: bindingMode.twoWay
   }) mdValue = '';
 
+  _suspendUpdate = false;
+
   constructor(element, taskQueue, updateService) {
     this.element = element;
     this.taskQueue = taskQueue;