Javascript 如何在输入 3 个字符后显示自动建议结果

Question

我有一个数组，里面有这样的汽车:

[
  {"name" : "Audi"},
  {"name" : "BMW"},
  {"name" : "Mercedes"}, 
  {"name" : "VW"},
  {"name" : "Fiat"},
  {"name" : "Hyundai"},
  {"name" : "Opel"},
  ...and many many more
]

现在我有一个输入字段，用户可以在其中搜索他们想要的汽车，但我想包括一些自动建议。到目前为止，我已经做到了这一点

<input type="text" @input="filterCars" v-model="search" />


filterSkills() {
  this.filterCars = this.cars.filter(car => {
    return car.name.toLowerCase().includes(this.search.toLowerCase());
  });
}

这实际上工作正常，但我想让匹配结果出现，在用户输入 3 个字符 之后 - 例如，当我键入“Aud”时 - 奥迪将作为建议出现 - 如何我可以这样做吗？

Answer 1

您可以仅在长度为所需长度或更长时进行过滤，如果小于则返回一个空数组，从而清除列表:

filterSkills() {
    this.filterCars = this.search.length > 2 ? this.cars.filter(car => 
    car.name.toLowerCase().includes(this.search.toLowerCase())) : [];
}