是否有任何可能的方法在 Vuetify 的 v-autocomplete 中搜索多个属性？答案

【问题标题】：Are there any possible ways to search multiple attribute in v-autocomplete in Vuetify?是否有任何可能的方法在 Vuetify 的 v-autocomplete 中搜索多个属性？
【发布时间】：2021-01-15 14:19:20
【问题描述】：

我有一个对象数组绑定到 v-autocomplete 的 item 属性。这是我的数据：

products: [
   {
      text: "Apple",
      value: 209
   },
   {
      text: "Banana",
      value: 229
   }
]

<v-autocomplete>
   ...
   :item="products"
   :search-input.sync="search"
</v-autocomplete>

所以，我希望能够同时按“文本”和“值”进行搜索。目前，我只能搜索其中一个。

【问题讨论】：

标签： vue.js vuetify.js next v-autocomplete

【解决方案1】：

使用自定义过滤功能来自动完成如下

<v-autocomplete>
   ...
   :filter="customFilter"
   :item="products"
   :search-input.sync="search"
</v-autocomplete>

methods: {
     customFilter (item, queryText, itemText) {
         // return true or false according to your logic
         // i.e queryText matches with item object
     },
},

【讨论】：

【解决方案2】：

是的，您可以使用文档中提供的过滤器属性搜索多个属性：

  customSearch(item, queryText, itemText) {
      const data = item.text.toLowerCase() + item.value.toLowerCase()
      const searchText = queryText.toLowerCase()

      return textOne.indexOf(searchText) > -1 
  }

并像这样在模板中使用：

 <v-autocomplete
     spellcheck="false" 
     :filter="customSearch"
...
</v-autocomplete>

参考此文档：https://vuetifyjs.com/en/api/v-autocomplete/#props

【讨论】：