基于uni-app实现搜索功能静态数据

基于 UniApp 实现搜索功能时，通常需要结合 Vue.js 的数据绑定和搜索算法来处理静态数据。以下是大致步骤：

1. **数据结构设计**：
- 首先，你需要有一个包含静态数据的对象数组。例如，`dataList = [{name: 'item1', desc: '描述1'}, ...]`。

2. **HTML模板设置**：
在组件的 `.vue` 文件中，创建一个输入框用于用户输入关键词，以及一个展示搜索结果的列表：

   <template>
     <div>
       <input v-model="searchKey" placeholder="请输入搜索关键字">
       <ul ref="listWrapper">
         <li v-for="(item, index) in filteredData" :key="index">{{ item.name }}</li>
       </ul>
     </div>
   </template>

3. **Vue实例中监听搜索**：
使用 `v-model` 将输入框关联到 Vue 实例的数据 `searchKey`，然后在 `methods` 中添加搜索函数：

   <script>
   export default {
     data() {
       return {
         dataList,
         searchKey: '',
         filteredData: []
       }
     },
     methods: {
       search() {
         this.filteredData = this.dataList.filter(item => {
           return item.name.includes(this.searchKey.toLowerCase());
         });
       }
     },
     mounted() {
       this.search(); // 初始加载时也进行一次搜索
     }
   }
   </script>

4. **搜索事件触发**：
当用户输入时，可以监听输入框的变化，实时更新搜索结果：

   <script>
   ...
   watch: {
     searchKey(newVal, oldVal) {
       if (newVal !== oldVal) {
         this.search();
       }
     }
   },
   ...
   </script>

5. **显示部分数据**：
如果只想显示部分结果，可以在 `filteredData` 上做相应限制，比如只显示前10个结果。