如何在Aurelia中创建自动完成输入？

Question

我是Aurelia的新手，我想知道如何创建自动完成输入。我正在尝试自动完成颜色面板的设置，一旦您输入输入内容，它将自动完成面板中的颜色（项目）。

这是html：

 <template>
   <div>
   <input type="text" value.bind="selectedColors1" 
  change.delegate="search()" id="filter" placeholder="Search for 
 feeds.."> 
   <div>
   <select multiple value.bind="selectedColors1" style="width:50%"> 
     <option repeat.for="color of colors1" model.bind="color.id">
       ${color.name}
     </option>
   </select>
   </div>
   </div>

   <br />
   <button type="button" click.delegate="add()">Add</button>
   <button type="button" click.delegate="remove()">Remove</button> 
 <br />

   <select multiple value.bind="selectedColors2" style="width:50%">
     <option repeat.for="color of colors2" model.bind="color.id">
       ${color.name}
     </option>
   </select>
 </template>

这是JS：

export class dualList {
  colors1 = [
    { id: "purple", name: "Purple" },
    { id: "black", name: "Black" },
    { id: "orange", name: "Orange" }
  ];

  colors2 = [
    { id: "white", name: "White" },
    { id: "red", name: "Red" },
    { id: "blue", name: "Blue" }
  ];

  selectedColors1 = [];
  selectedColors2 = [];

  add() {
    this.selectedColors1.forEach(selected => {
      // get the index of selected item
      const index = this.colors1.findIndex(c => c.id === selected);
      this.colors2.push(this.colors1[index]);
      this.colors1.splice(index, 1);
    });
  }

  remove() {
    this.selectedColors2.forEach(selected => {
      // get the index of selected item
      const index = this.colors2.findIndex(c => c.id === selected);
      this.colors1.push(this.colors2[index]);
      this.colors2.splice(index, 1);
    });
  }
  search(){
    console.log(this.selectedColors1);
    return true;
   }
}

我希望输入ID“过滤器”能够自动完成第一个列表中的颜色，但是什么也没发生。