vant webapp 实现一个下拉搜索框

vant Webapp 提供了一个叫做 vant-picker 的组件，可以用来实现一个下拉搜索框的功能。以下是简单的步骤来创建一个：

1. 首先，确保已经安装了 Vant UI 的 Webapp 版本。你可以通过 CDN 引入，也可以使用 npm 或者 yarn 安装。

<!-- 使用 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@latest/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/vant@latest/dist/index.js"></script>

<!-- 或者本地安装并引入 -->
<script src="path/to/vant.min.js"></script>

2. 然后，在 HTML 中引入 `van-picker` 组件，并添加到你的页面结构中：

<div class="van-field">
  <van-picker v-model="searchValue" placeholder="请输入搜索内容">
    <!-- 这里是一个可选项列表，可以根据需要动态生成 -->
    <van-option v-for="option in options" :key="option.value">
      {{ option.label }}
    </van-option>
  </van-picker>
</div>

3. 在 JavaScript 中初始化组件，并设置数据属性 `options` 和 `searchValue`：

import { ref } from 'vue';

export default {
  data() {
    return {
      searchValue: '',
      options: ['选项1', '选项2', '选项3'], // 初始化的选项列表
    };
  },
};

4. 当用户输入改变时，你可以在 Vue 模板中绑定事件处理器来监听搜索值的变化，例如显示匹配的结果：

<template>
  <!-- ... -->
  <div v-if="searchValue.length > 0">
    <!-- 显示匹配结果的代码 -->
  </div>
</template>

<script>
// ... (之前的数据部分)
export default {
  // ... (其他配置)
  methods: {
    handleSearchChange(value) {
      this.options = this.filteredOptions.filter(option => option.toLowerCase().includes(value.toLowerCase()));
    },
  },
  watch: {
    searchValue(newVal) {
      this.handleSearchChange(newVal);
    },
  },
};
</script>

在这个例子中，当用户输入时，会过滤 `options` 列表，只显示包含输入字符串的选项。