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

【问题标题】：Javascript how to make auto suggest results appear after entering 3 charactersJavascript如何在输入3个字符后显示自动建议结果
【发布时间】：2019-11-20 22:22:17
【问题描述】：

我有一个array 有这样的汽车：

[
  {"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”时 - 奥迪将显示为建议 - 如何我可以这样做吗？

【问题讨论】：

也许这回答了你的问题：stackoverflow.com/a/57204605/2972052

标签： javascript vue.js vuejs2

【解决方案1】：

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

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

【讨论】：

这非常好，正是我想要的！非常感谢！ :-)

【解决方案2】：

只需在您的 filterSkills 函数中添加一个条件

filterSkills() {
   if (this.search.length >= 3) {
    this.filterCars = this.cars.filter(car => {
      return car.name.toLowerCase().includes(this.search.toLowerCase());
    });
   }else{
     return [];
   }

};

【讨论】：

【解决方案3】：

hey you can do onething,

 **onInputChange(text) {
   if (*here you can put the condition if text has atleset 3 alphabets like this.search.length>3*) {
       filteredData = this.options[0].data.filter(item => {
     return item.name.toLowerCase().indexOf(text.toLowerCase()) > -1;
    }).slice(0, this.limit);
   }**

【讨论】：