Vuetify-v-自动完成-搜索可隐藏标题

Question

请查看以下屏幕截图，其中v-autocomplete最初显示Header部分，但是当我开始搜索时，它隐藏了Header部分。因此，对于任何远程数据，它都不会显示标题。 e有什么方法可以保留标题并显示结果？谢谢。

这是代码笔示例

https://codepen.io/kiranvasi/pen/vYBbgEY?&editable=true&editors=101

 <v-autocomplete
                v-model="friends"
                :disabled="isUpdating"
                :items="people"
                filled
                chips
                color="blue-grey lighten-2"
                label="Select"
                item-text="name"
                item-value="name"
                multiple
              >

Answer 1

要在显示的结果中保留标题，您可以修改过滤项目以包含标题的函数。

v-autocomplete 有一个 filter 道具，它接受一个函数，该函数确定一个项目是否符合输入到自动完成中的文本，该文本在源代码 here 中定义并如下所示

    filter: {
      type: Function,
      default: (item, queryText, itemText) => {
        return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
      }

您可以创建自己的过滤器方法并将其绑定到自动完成的 :filter 道具。在 Vuetify 中，v-autocomplete 是 v-select 的扩展 - 标题被定义为具有 header 属性的项目，因此您可以编写像

这样的过滤器函数

methods: {
  returnHeadersAndFilter(item, queryText, itemText) {
    if(item.header) {
      return true
    }
    return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1
  }

}

然后将此自定义过滤器方法绑定到 v-autocomplete 的过滤器道具，使用您的 v-autocomplete html

<v-autocomplete
  v-model="friends"
  :disabled="isUpdating"
  :items="people"
  :filter="returnHeadersAndFilter"
  filled
  chips
  color="blue-grey lighten-2"
  label="Select"
  item-text="name"
  item-value="name"
multiple
></v-autocomplete>