vant下拉菜单实现搜索 vue3

1. 首先，需要在组件中设置数据来存储下拉菜单的选项和用户选择的值：

<template>
  <div class="dropdown">
    <input type="text" v-model="selected" @input="filterOptions">
    <ul v-if="showOptions">
      <li v-for="(option, index) in filteredOptions" :key="index" @click="selectOption(option)">
        {{ option }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ['Apple', 'Banana', 'Orange', 'Pear', 'Pineapple'],
      selected: '',
      showOptions: false
    }
  },
  computed: {
    filteredOptions() {
      return this.options.filter(option => option.toLowerCase().includes(this.selected.toLowerCase()))
    }
  },
  methods: {
    filterOptions() {
      this.showOptions = true
    },
    selectOption(option) {
      this.selected = option
      this.showOptions = false
    }
  }
}
</script>

2. 在输入框中使用 v-model 来绑定 selected 数据，当用户输入内容时可以通过 @input 事件触发 filterOptions 方法来显示下拉菜单。

3. 接下来，需要使用 computed 计算属性来过滤选项，返回一个新的 filteredOptions 数组，该数组只包含用户所输入的值并且与该值相似的选项。

4. 在模板中，在 ul 元素上通过 v-if 来确定是否显示下拉菜单，遍历 filteredOptions 数组并在每个 li 元素添加 click 事件处理程序 selectOption，当用户点击选项时，将该选项的值赋值给 selected 数据并隐藏下拉菜单。

5. 在样式表中添加 CSS 样式来设置下拉菜单的样式，包括它的位置，大小和边框等样式。