Как создать автозаполнение ввода в Aurelia? - PullRequest
1 голос
/ 04 апреля 2019

Я новичок в Аурелии, и мне интересно, как вы можете создать автозаполнение ввода. Я пытаюсь выполнить автозаполнение для панели цветов, и после того, как вы введете данные для ввода, будет выполнено автозаполнение для цветов (элементов), находящихся на панели.

Это 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;
   }
}

Я ожидал, что входной идентификатор "фильтра" автоматически завершит цвета в первом списке, но ничего не происходит.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...