uniapp picker-view 搜索选择框

<template><view class="container"><input type="text" v-model="keyword" placeholder="输入关键词搜索" class="search-input" @input="handleSearch"><picker-view :value="value" @change="pickerChange"><picker-view-column><view v-for="(item, index) in filteredOptions" :key="index" @click="xx(item)">{{ item }}</view></picker-view-column></picker-view></view>
</template><script>
export default {data() {return {options: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项22'],filteredOptions: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项22'],value: [0], // 默认选中第一个选项keyword: ''};},methods: {handleSearch() {const keyword = this.keyword.trim().toLowerCase();if (keyword === '') {this.filteredOptions = [...this.options];} else {this.filteredOptions = this.options.filter(option =>option.toLowerCase().includes(keyword));}// 搜索后，默认选中第一个匹配项this.value = [0];},pickerChange(e) {this.value = e.detail.value;console.log(e)},xx(item){console.log(item)}}
};
</script><style scoped>
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}.search-input {width: 80%;margin-bottom: 20px;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 5px;
}picker-view {width: 80%;max-width: 400px;height: 200px;background-color: #f0f0f0;border-radius: 10px;
}picker-view-column {flex: 1;text-align: center;line-height: 50px;
}
</style>