vant-ui实现输入框自动补全

### 使用 Vant UI 实现 Input 输入框自动补全功能

为了实现带有自动补全功能的 `Input` 组件，可以利用 Vant 的 `Picker` 或者自定义逻辑配合 `Field` 来完成这一需求。下面提供一种基于 `Search` 和 `Popup` 结合的方式作为实例。

#### 方案一：通过 Search 和 Popup 实现简易版自动补全效果

此方法适用于数据量不大且不需要复杂匹配算法的情况：

<template>
  <div class="autocomplete">
    <!-- 搜索栏 -->
    <van-search 
      v-model="searchValue"
      show-action
      placeholder="请输入搜索关键词"
      @focus="onFocus"
      @blur="onBlur"
      @input="onChange"
    >
      <template #action>
        <span @click="clear">取消</span>
      </template>
    </van-search>

    <!-- 下拉列表弹窗 -->
    <van-popup v-model="showList" position="bottom">
      <van-list>
        <van-cell 
          v-for="(item, index) in filteredOptions" :key="index"
          clickable
          @click="selectItem(item)"
        >
          {{ item }}
        </van-cell>
      </van-list>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      options: ['选项1', '选项2', '选项3'], // 假设这是预加载的数据源
      showList: false,
    };
  },
  
  computed: {
    filteredOptions() {
      const keyword = this.searchValue.toLowerCase();
      return this.options.filter(option => option.toLowerCase().includes(keyword));
    }
  },

  methods: {
    onFocus() {this.showList = true;},
    onBlur() {setTimeout(() => (this.showList = false), 200);}, // 稍微延迟关闭防止点击项时误触发
    onChange(value) {/* 可在此处加入防抖处理 */},
    selectItem(item) {
      this.searchValue = item;
      this.$nextTick(() => this.onBlur());
    },
    clear() {
      this.searchValue = '';
      this.onBlur();
    }
  }
};
</script>

这种方法简单易懂，在用户输入字符后会实时过滤并展示符合条件的结果供选择[^2]。

对于更复杂的场景比如远程获取建议、异步更新候选词等，则可能需要用到官方文档中的其他组件如 `ActionSheet`, `DropdownMenu` 配合服务端接口调用来达成目的。