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

Posted 2023-02-25

【中文标题】是否有任何可能的方法在 Vuetify 的 v-autocomplete 中搜索多个属性？

【英文标题】：Are there any possible ways to search multiple attribute in v-autocomplete in Vuetify?

【发布时间】：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>

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

【参考方案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