Vuetify中v-autocomplete组件匹配规则与样式自定义问询

1. 修改匹配规则为开头匹配 #

给v-autocomplete绑定自定义过滤函数，替换默认的包含匹配逻辑，仅保留以输入字符开头的选项：

2. 调整搜索字符为加粗显示 #

通过自定义item插槽，重写下拉选项的渲染逻辑，将匹配的开头字符用<strong>标签包裹实现加粗。

完整代码如下：

<template>
  <div class="inspire" style="background-color:red">
    <v-app-bar style="padding: 10px 0px;"
      color="rgba(33,33,33,255)" 
      elevation="0" 
      height="64px"
    > 
      <div style="width:100%" v-if="$route.name == 'Mapping'">
        <v-autocomplete
          v-model="valuesActor"
          :items="actorArray"
          :search-input.sync="searchActor"
          :filter="startsWithFilter"
          filled
          @blur="toggleSearch"
          background-color="#313131"
          append-icon=""
          color="var(--textLightGrey)"
          :menu-props="{maxWidth: 1600}"
          placeholder="Search for actors"
          active
        >
          <!-- 自定义下拉选项模板 -->
          <template #item="{ item, attrs, on }">
            <v-list-item v-bind="attrs" v-on="on">
              <v-list-item-title v-html="formatBoldText(item)"></v-list-item-title>
            </v-list-item>
          </template>
        </v-autocomplete>
      </div>  
    </v-app-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valuesActor: null,
      searchActor: '',
      actorArray: [] // 你的数据源
    }
  },
  methods: {
    // 开头匹配过滤函数
    startsWithFilter(item, queryText, itemText) {
      const lowerQuery = queryText.toLowerCase()
      return itemText.toLowerCase().startsWith(lowerQuery)
    },
    // 格式化文本，匹配部分加粗
    formatBoldText(item) {
      if (!this.searchActor) return item.toString()
      
      const lowerSearch = this.searchActor.toLowerCase()
      const itemStr = item.toString()
      const lowerItem = itemStr.toLowerCase()
      
      if (!lowerItem.startsWith(lowerSearch)) return itemStr
      
      const matchLen = lowerSearch.length
      return `<strong>${itemStr.slice(0, matchLen)}</strong>${itemStr.slice(matchLen)}`
    },
    toggleSearch() {
      // 保留原方法逻辑
    }
  }
}
</script>

注意事项 #

• 如果你的actorArray是对象数组（比如每个元素含name字段），需要修改itemText和formatBoldText中的取值逻辑，例如用item.name替代item。
• 函数中统一转小写是为了实现大小写不敏感的匹配，若需要严格区分大小写，移除toLowerCase()即可。

内容的提问来源于stack exchange，提问作者Quentin