vue3-select2-component首字符过滤：无法获取输入框实时输入值

需求是对vue3-select2-component的选项进行首字符过滤，settings中的sorter功能可正常工作，但无法获取输入框中输入的实时内容。目前仅@select事件可用，但该事件不适用于此需求，尝试使用@change事件也完全无效。

相关代码如下：

<Select2
  value="modelValue"
  @input="(e) => modelValue = e.target.value"
  :settings="select2Settings"
/>

<script setup>
const modelValue = ref('')
const select2Settings = {
  sorter: function (results) {
    return results.filter((item) => item.text.startsWith(modelValue.value))
  }
}
</script>

解决方法 #

1. 用Select2原生query回调实现过滤（推荐） #

vue3-select2-component封装了原生Select2插件，通过query回调可直接获取实时输入的搜索词，同时完成过滤逻辑：

<Select2
  v-model="modelValue"
  :settings="select2Settings"
/>

<script setup>
const modelValue = ref('')
// 原始选项数组
const originalOptions = ref([
  { id: 1, text: 'Apple' },
  { id: 2, text: 'Banana' },
  { id: 3, text: 'Cherry' }
])

const select2Settings = {
  query: function (params) {
    // params.term即为输入框实时内容
    const filtered = originalOptions.value.filter(item => 
      item.text.startsWith(params.term)
    )
    // 将过滤结果返回给Select2
    params.callback({ results: filtered })
  }
}
</script>

2. 手动监听搜索输入框事件 #

若坚持使用sorter，可通过DOM监听获取实时输入值：

<Select2
  ref="select2Ref"
  v-model="modelValue"
  :settings="select2Settings"
/>

<script setup>
const select2Ref = ref(null)
const modelValue = ref('')
const inputValue = ref('')

onMounted(() => {
  // 获取Select2生成的搜索输入框
  const searchInput = select2Ref.value.$el.querySelector('.select2-search__field')
  if (searchInput) {
    searchInput.addEventListener('input', (e) => {
      inputValue.value = e.target.value
    })
  }
})

const select2Settings = {
  sorter: function (results) {
    return results.filter(item => item.text.startsWith(inputValue.value))
  }
}
</script>

注意点 #

• 优先用v-model绑定值，替代原生@input赋值，符合Vue响应式规范；
• Select2的sorter设计初衷是排序，过滤逻辑官方推荐用query实现。

内容的提问来源于stack exchange，提问作者Евгений Гедройц