Vuetify Autocompletes：如何搜索对象的多个属性？

Question

Vue代码：

<template>
  <div>
    <v-card
      color="grey darken-2"
      dark
    >
      <v-card-text>
        <v-autocomplete
          spellcheck="false"
          v-model="model"
          :items="items"
          :loading="isLoading"
          :search-input.sync="search"
          @change="search=''"
          color="white"
          hide-no-data
          hide-selected
          clearable
          item-text="CodeAndName"
          item-value="Code"
          placeholder="Search stock symbols and names"
          prepend-icon="mdi-account-search"
          return-object
          autofocus
          dense
        >
          <template v-slot:item="{ item }">
            <v-list>
            <v-list-item-title class="justify-center">{{item.Code}}</v-list-item-title>
            <v-list-item-subtitle>{{item.Name}}</v-list-item-subtitle>
            <v-list-item-subtitle>{{item.Exchange}}</v-list-item-subtitle>
            </v-list>
          </template>
        </v-autocomplete>
      </v-card-text>
      <v-divider></v-divider>
    </v-card>
    <Chart v-if="model" :exchangeCode="model.Exchange" :symbol="model.Code"/>
  </div>
</template>

JS代码：

import Chart from './GChart.vue'
export default {
  name: "Search",
  components: {
    Chart,
  },
  data: () => ({
    symbolsExchangesNames: [],
    isLoading: false,
    model: null,
    search: null
  }),

  computed: {
    items () {
      return this.symbolsExchangesNames
    }
  },
  methods: {
    fetchData() {
      if (this.isLoading && this.model) return
      this.isLoading = true
      this.model = null
      this.symbolsExchangesNames = []
      let hostname = window.location.hostname
      fetch(`http://${hostname}/backend/search/${this.search}`)
        .then(res => res.json())
        .then(res => {
          for(let i of res){
            this.symbolsExchangesNames.push({
              Code: i.Symbol,
              Exchange: i.Exchange,
              Name: i.Name,
              CodeAndName: `${i.Symbol} ${i.Name}`
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
        .finally(() => (this.isLoading = false))
    },
    fetchDebounced() {
      clearTimeout(this._timerId)
      this._timerId = setTimeout(() => {
        this.fetchData()
      }, 200)

    }
  },
  watch: {
    search (val) {
      if(val == null || val == "") return
      if(this.model){
        if(val == this.model.CodeAndName) return
      }
      this.fetchDebounced()
    },
  }
}

正如您在自动完成组件的 item-text 属性中看到的，我传递了“CodeAndName”，这是我创建的一个属性，以便它可以搜索项目的代码和名称。这意味着在做出选择后，它将同时显示在搜索栏中。不过，我希望它在搜索代码和名称时仅显示名称。我尝试将数组传递到项目文本中，但这也不起作用。我也不知道 item-value 的用途是什么，文档没有指定。

我也不知道这是否重要，但是当调用 API 时，它会返回前 10 个结果，其中

if searchterm in item.Code or searchterm in item.Name

Answer 1

正如文档中提到的，您可以定义自定义过滤器方法，例如

  customFilter (item, queryText, itemText) {
      const textOne = item.CodeAndName.toLowerCase()
      const searchText = queryText.toLowerCase()

      return textOne.indexOf(searchText) > -1 
  }

and pass it in
 <v-autocomplete
     spellcheck="false" 
     :filter="customFilter"
...
</v-autocomplete>