awesomplete-consumer.html

<autocomplete data.two-way="filterValues" selected.bind="selectedFilter>
</autocomplete>
  

awesomplete.html

<template>

  <label for.bind="inputId">${label}</label>
  <input name.bind="inputId"
         id.bind="inputId"
         selected.two-way="selectedFilter">

</template>

awesomplete.js

import {bindable, inject} from 'aurelia-framework';
import _ from 'lodash';
import * as Awe from 'awesomplete'; //eslint-disable-line

const SELECT_COMPLETE = 'awesomplete-selectcomplete';

export class AwesompleteFactory {

  create(input) {
    const awe = new Awesomplete(input);

    // monkey patch Awesomplete to add toggle function
    awe.toggle = function () {
      if (this.ul.childNodes.length === 0) {
        this.minChars = 0;
        this.evaluate();
      } else if (this.ul.hasAttribute('hidden')) {
        this.evaluate();
        this.open();
      } else {
        this.evaluate();
        this.close();
      }
    };

    return awe;
  }
}

@inject(AwesompleteFactory)
export class Autocomplete {

  @bindable data;
  input;
  inputId;
  awe;

  constructor(awesompleteFactory) {
    this.inputId = _.uniqueId('input-');
    this.awesompleteFactory = awesompleteFactory;
  }

  listener(e) {
    this.selected = e.target.value;
    e.target.value = null;
  }

  attached() {
    this.input = document.getElementById(this.inputId);
    this.input.placeholder = 'Select filter...';
    this.awe = this.awesompleteFactory.create(this.input);
    this.awe.list = this.data;
    this.input.addEventListener(SELECT_COMPLETE, this.listener);
  }

  detached() {
    this.input.removeEventListener(SELECT_COMPLETE, this.listener);
  }

  toggle() {
    this.input.value = '';
    this.awe.toggle();
  }
}