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

我是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>

---

我希望输入id“filter”自动完成第一个列表中的颜色，但什么也没有发生。

您正在将文本框绑定到数组。您需要将其绑定到另一个（新）属性。在搜索时，您希望仅使用与文本匹配的选项更新select，还是希望在输入上使用jquery自动完成类型功能？@adiga！您正在将文本框绑定到数组。您需要将其绑定到另一个（新）属性。在搜索时，您希望仅使用与文本匹配的选项更新select，还是希望在输入上使用jquery自动完成类型功能？@adiga！

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;
   }
}