uni-app picker 插件添加搜索功能

在uni-app中使用picker组件并添加搜索功能，可以通过结合input输入框和picker组件来实现。当用户输入搜索关键词时，动态更新picker组件的数据列表。以下是一个简单的实现案例：

1. 创建页面结构

在页面的template部分，添加一个input输入框用于搜索，以及一个picker组件用于显示筛选后的数据。

<template>
  <view>
    <input v-model="searchKeyword" placeholder="请输入搜索关键词" @input="onSearchInput" />
    <picker mode="selector" :range="filteredData" @change="onPickerChange">
      <view class="picker">
        {{ selectedData ? selectedData : '请选择' }}
      </view>
    </picker>
  </view>
</template>

2. 定义数据和方法

在页面的script部分，定义初始数据和方法来处理搜索和选择功能。

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      originalData: ['Apple', 'Banana', 'Orange', 'Grape', 'Pineapple'],
      filteredData: [],
      selectedData: null,
    };
  },
  mounted() {
    // 初始化筛选数据
    this.filteredData = this.originalData;
  },
  methods: {
    onSearchInput() {
      // 根据搜索关键词筛选数据
      const keyword = this.searchKeyword.toLowerCase();
      this.filteredData = this.originalData.filter(item => item.toLowerCase().includes(keyword));
      // 重置选择
      this.selectedData = null;
    },
    onPickerChange(e) {
      // 获取选中的值
      this.selectedData = this.filteredData[e.detail.value];
    },
  },
};
</script>

3. 添加样式

为了美观，可以添加一些简单的样式。

<style>
.picker {
  padding: 20px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  text-align: center;
}
</style>

总结

上述代码实现了一个简单的搜索功能结合picker组件的案例。当用户输入搜索关键词时，filteredData会根据关键词动态更新，从而改变picker组件的选项。当用户从picker组件中选择一个选项时，selectedData会被更新为选中的值。

这种实现方式充分利用了Vue的双向数据绑定和事件处理机制，使得搜索和选择功能能够流畅地结合在一起。在实际项目中，可以根据具体需求对代码进行进一步的优化和扩展。