PrimeVue Chips组件如何实现类似Autocomplete的多选+手动输入功能？

当然可以实现，你有两种常用方案可选，都能满足「选择预设选项+手动输入自定义值」的需求：

方案一：Chips + Autocomplete 组件组合 #

通过将Chips（负责标签展示）和Autocomplete（负责自动补全）结合，完全复用Chips的原生样式，同时获得自动补全能力。

代码示例 #

<template>
  <div class="chips-auto-container">
    <!-- 负责展示已选标签 -->
    <Chips 
      v-model="selectedTags" 
      @remove="onTagRemove"
      placeholder="点击输入或选择选项"
    />
    <!-- 负责提供自动补全建议 -->
    <Autocomplete
      v-model="inputText"
      :suggestions="filteredOptions"
      @complete="filterOptions"
      @select="onOptionSelect"
      class="mt-2"
      placeholder="输入关键词搜索"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 已选标签集合
const selectedTags = ref([]);
// 输入框当前文本
const inputText = ref('');
// 所有预设选项
const presetOptions = ref(['Vue', 'React', 'Angular', 'Svelte']);

// 实时过滤后的选项列表
const filteredOptions = computed(() => {
  if (!inputText.value) return presetOptions.value;
  return presetOptions.value.filter(opt => 
    opt.toLowerCase().includes(inputText.value.toLowerCase())
  );
});

// 输入时过滤选项
const filterOptions = (event) => {
  inputText.value = event.query;
};

// 选择预设选项时添加到标签
const onOptionSelect = (event) => {
  const value = event.value;
  if (!selectedTags.value.includes(value)) {
    selectedTags.value.push(value);
  }
  inputText.value = ''; // 清空输入框
};

// 移除标签时更新集合
const onTagRemove = (event) => {
  const idx = selectedTags.value.indexOf(event.value);
  if (idx !== -1) {
    selectedTags.value.splice(idx, 1);
  }
};
</script>

<style scoped>
.chips-auto-container {
  width: 400px;
}
</style>

方案二：用Combobox组件自定义Chip样式 #

PrimeVue的Combobox本身支持多选和自动补全，只需要自定义chip插槽，就能实现接近Chips的标签展示效果，代码更简洁。

代码示例 #

<template>
  <Combobox
    v-model="selectedItems"
    :options="allOptions"
    optionLabel="name"
    optionValue="name"
    multiple
    placeholder="输入或选择选项"
    class="custom-combobox"
  >
    <!-- 自定义选中项的Chip样式 -->
    <template #chip="props">
      <span class="custom-chip">
        {{ props.option.name }}
        <button class="p-chip-remove-icon" @click="props.remove($event)"></button>
      </span>
    </template>
  </Combobox>
</template>

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

// 已选项目
const selectedItems = ref([]);
// 预设选项（支持手动输入非预设值）
const allOptions = ref([
  { name: 'JavaScript' },
  { name: 'TypeScript' },
  { name: 'Python' },
  { name: 'Java' }
]);
</script>

<style scoped>
.custom-combobox .p-multiselect-chips {
  flex-wrap: wrap;
  gap: 6px;
}

.custom-chip {
  background-color: #f0f0f0;
  padding: 4px 10px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.custom-chip .p-chip-remove-icon {
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
</style>

两种方案对比：

• 方案一：自由度更高，完全保留Chips的交互和样式，适合需要严格匹配Chips原生体验的场景。
• 方案二：代码量更少，复用Combobox的内置多选、自动补全逻辑，适合快速开发。

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