<input type="text">如何用v-autocomplete实现点选建议自动填充

v-autocomplete 是 Vuetify 生态的自动补全组件，点击建议项填充/插入输入框是常规需求，分两种场景实现即可：

场景1：直接使用v-autocomplete组件（最简便，默认支持点击填充） #

v-autocomplete 本身就会渲染为功能完整的文本输入框，不需要额外嵌套原生<input type="text">，组件内置了点击建议项自动填充输入框的逻辑，基础写法如下：

<template>
  <v-autocomplete
    v-model="inputContent"
    :items="suggestionOptions"
    label="请输入内容"
    variant="outlined"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue'
// 输入框双向绑定值
const inputContent = ref('')
// 下拉建议列表，可根据输入内容动态过滤更新
const suggestionOptions = ref([
  '前端开发',
  '后端开发',
  'UI设计',
  '产品经理'
])
</script>

这个写法下，输入框聚焦、输入内容时会自动弹出建议下拉，点击任意建议项，对应文本会直接填充到输入框，不需要额外编写事件处理逻辑。如果需要自定义过滤规则，给组件传入filter属性写自定义过滤函数即可。

场景2：对接已有的原生<input type="text"> #

如果你已经有现成的原生文本输入框，不想替换成v-autocomplete自带的输入框样式，可以通过挂载下拉层的方式对接，手动处理选中逻辑：

<template>
  <!-- 原生text输入框 -->
  <input
    ref="nativeInput"
    type="text"
    v-model="inputContent"
    @focus="showSuggestionPanel = true"
    @blur="setTimeout(() => showSuggestionPanel = false, 200)"
  />
  <!-- 自动补全建议层，挂载到原生输入框下方 -->
  <v-autocomplete
    :items="suggestionOptions"
    :attach="nativeInput"
    v-model:menu="showSuggestionPanel"
    hide-details
    class="v-autocomplete--hidden-input"
    @item-click="handleSelectSuggestion"
  />
</template>

<script setup>
import { ref } from 'vue'
const inputContent = ref('')
const nativeInput = ref(null)
const showSuggestionPanel = ref(false)
const suggestionOptions = ref([
  '插入文本A',
  '插入文本B',
  '插入文本C'
])

// 选中建议项的处理逻辑
const handleSelectSuggestion = (item) => {
  const selectedText = item.title
  const inputEl = nativeInput.value
  // 如果需要替换整个输入框内容，直接赋值即可
  // inputContent.value = selectedText
  
  // 如果需要在光标位置插入文本，用下面的逻辑
  const cursorStart = inputEl.selectionStart
  const cursorEnd = inputEl.selectionEnd
  const originValue = inputEl.value
  inputEl.value = originValue.slice(0, cursorStart) + selectedText + originValue.slice(cursorEnd)
  inputContent.value = inputEl.value
  // 光标移动到插入内容的末尾
  inputEl.selectionStart = inputEl.selectionEnd = cursorStart + selectedText.length
}
</script>

<style scoped>
.v-autocomplete--hidden-input :deep(.v-field) {
  display: none;
}
</style>

注意点 #

• 给原生输入框加blur延迟关闭的逻辑，是为了避免点击建议项时输入框先失焦导致下拉层提前关闭，无法触发选中事件。
• 如果只需要点击建议替换整个输入框内容，直接把inputContent通过v-model绑定到v-autocomplete即可，不需要写handleSelectSuggestion方法。
• 建议列表可以监听输入框的input事件，根据用户输入的关键词动态拉取/过滤，实现实时联想的效果。

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