uni-app 实现输入时实时搜索加下拉多选功能

在 uni-app 中实现输入时实时搜索加下拉多选功能，可以结合 uni-ui 组件库中的 uni-easyinput 和 uni-select 组件，或者使用自定义的组件和逻辑来实现。以下是一个简单的实现思路及代码案例：

1. 引入必要的组件

首先，确保在项目中引入了 uni-ui 组件库（如果尚未引入），或者使用自定义组件。

2. 创建数据结构和逻辑

定义用于搜索和选项的数据结构，并编写搜索逻辑。

<script>
export default {
  data() {
    return {
      searchQuery: '', // 搜索查询
      filteredOptions: [], // 过滤后的选项
      allOptions: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
        // 更多选项
      ],
      selectedOptions: [] // 已选项
    };
  },
  watch: {
    searchQuery(newVal) {
      this.filterOptions(newVal);
    }
  },
  methods: {
    filterOptions(query) {
      if (!query) {
        this.filteredOptions = this.allOptions;
      } else {
        this.filteredOptions = this.allOptions.filter(option =>
          option.label.toLowerCase().includes(query.toLowerCase())
        );
      }
    },
    toggleSelection(option) {
      const index = this.selectedOptions.indexOf(option.value);
      if (index > -1) {
        this.selectedOptions.splice(index, 1);
      } else {
        this.selectedOptions.push(option.value);
      }
    }
  }
};
</script>

3. 编写模板

使用 uni-easyinput 进行输入，并使用自定义的下拉列表展示过滤后的选项，同时实现多选功能。

<template>
  <view>
    <uni-easyinput
      v-model="searchQuery"
      placeholder="Search..."
      @input="filterOptions"
    />
    <view v-for="option in filteredOptions" :key="option.value" class="option">
      <checkbox
        :value="option.value"
        :checked="selectedOptions.includes(option.value)"
        @change="toggleSelection(option)"
      >
        {{ option.label }}
      </checkbox>
    </view>
    <view>Selected: {{ selectedOptions }}</view>
  </view>
</template>

4. 样式

根据需要添加样式，使下拉列表和选项看起来更美观。

<style scoped>
.option {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
checkbox {
  margin-right: 10px;
}
</style>

总结

上述代码提供了一个基本的实现框架，用于在 uni-app 中实现输入时实时搜索加下拉多选功能。你可以根据实际需求进一步扩展和优化，例如添加加载动画、处理大数据集、优化性能等。