PrimeVue 3.53：AutoComplete选选项时保持下拉框常开的实现方法

针对你使用PrimeVue 3.53的AutoComplete组件时，点击选项下拉框自动关闭的问题，可以通过手动控制下拉框显示状态的方式实现"保持打开直到输入框失焦"的需求，具体实现如下：

核心思路 #

PrimeVue的AutoComplete默认在选项被选中后会触发下拉框关闭逻辑，我们可以通过以下两点覆盖默认行为：

1. 使用v-model:show绑定变量，手动掌控下拉框的显示/隐藏状态
2. 监听option-select事件，阻止默认的关闭行为，并强制保持下拉框打开

修改后的代码示例 #

<template>
  <AutoComplete
    :modelValue="modelValue"
    @update:modelValue="emits('update:modelValue', $event)"
    :suggestions="searchData"
    @complete="search"
    appendTo="self"
    <!-- 绑定下拉框显示状态 -->
    v-model:show="dropdownVisible"
    <!-- 监听选项选择事件 -->
    @option-select="handleOptionSelect"
  />
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])

const searchData = ref([])
// 控制下拉框显示的变量
const dropdownVisible = ref(false)

const search = async () => {
  try {
    const res = await $fetch(URL_DADATA, {
      method: 'POST',
      body: { query: props.modelValue },
      params: { token }
    })
    searchData.value = res.suggestions.map((i) => i.value)
    // 获取新建议后强制保持下拉框打开
    dropdownVisible.value = true
  } catch (err) {
    console.error(err)
  }
}

const handleOptionSelect = (event) => {
  // 更新绑定的模型值
  emits('update:modelValue', event.value)
  // 阻止组件默认的下拉关闭行为
  event.originalEvent.preventDefault()
  // 延迟设置确保状态生效，避免组件内部逻辑覆盖
  setTimeout(() => {
    dropdownVisible.value = true
  }, 0)
}
</script>

关键细节说明 #

• v-model:show：PrimeVue 3.x版本支持该双向绑定，用于直接控制下拉面板的显示状态
• option-select事件：该事件会在选项被选中时触发，通过event.originalEvent.preventDefault()可以阻止组件内部的关闭逻辑
• 搜索方法中设置dropdownVisible.value = true：确保每次输入字符获取新建议后，下拉框始终保持打开状态
• 输入框失焦时，组件会自动关闭下拉框，符合你的需求

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