uni-app 实现带有自动筛选功能的 input

在uni-app中实现带有自动筛选功能的input组件，可以通过结合input事件和v-for指令来实现。以下是一个简单的代码示例，展示了如何实现这一功能。

首先，确保你已经在项目中安装了uni-app并创建了一个基本的页面。

1. 数据准备

在页面的data中定义筛选列表和搜索关键字：

<script>
export default {
  data() {
    return {
      searchKey: '', // 搜索关键字
      options: [ // 选项列表
        { value: 'Apple', label: 'Apple' },
        { value: 'Banana', label: 'Banana' },
        { value: 'Cherry', label: 'Cherry' },
        // 更多选项...
      ],
      filteredOptions: [] // 筛选后的选项列表
    };
  },
  mounted() {
    // 初始化筛选列表为全列表
    this.filteredOptions = [...this.options];
  },
  methods: {
    // 筛选方法
    filterOptions(searchKey) {
      if (!searchKey) {
        this.filteredOptions = [...this.options];
      } else {
        this.filteredOptions = this.options.filter(option => 
          option.label.toLowerCase().includes(searchKey.toLowerCase())
        );
      }
    }
  },
  watch: {
    // 监听搜索关键字的变化
    searchKey(newVal) {
      this.filterOptions(newVal);
    }
  }
};
</script>

2. 模板部分

在模板中使用input组件来接收用户输入，并使用v-for指令来渲染筛选后的选项列表：

<template>
  <view>
    <input 
      type="text" 
      placeholder="请输入筛选关键字" 
      v-model="searchKey" 
      @input="filterOptions(searchKey)"
    />
    <view v-if="filteredOptions.length">
      <view v-for="(option, index) in filteredOptions" :key="index">
        {{ option.label }}
      </view>
    </view>
    <view v-else>
      无匹配结果
    </view>
  </view>
</template>

3. 样式部分（可选）

你可以根据需要添加一些样式来提升用户体验，例如输入框和筛选结果的样式：

<style>
input {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}
view[v-for] {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>

以上代码展示了如何在uni-app中实现一个带有自动筛选功能的input组件。用户输入关键字时，筛选列表会根据输入内容实时更新。这个示例是一个基础实现，你可以根据实际需求进一步扩展和优化。