uniapp 全局搜索如何实现

在uniapp中如何实现全局搜索功能？需要在所有页面都能调用搜索框，并且能够快速检索应用内的数据。请问有什么推荐的实现方案或插件可以使用？最好能兼顾性能和用户体验。

2 回复

在 pages.json 中添加 easycom 配置，自动引入组件。或使用 Vue.prototype 挂载全局方法，在页面中通过 this.方法名 调用。


在 UniApp 中实现全局搜索功能，可以通过以下步骤实现：

1. 核心思路

  • 使用 Vuex 管理全局搜索状态。
  • 在需要搜索的页面监听搜索关键词变化，执行搜索逻辑。
  • 通过事件总线或页面通信传递搜索关键词。

2. 实现步骤

（1）配置 Vuex 存储搜索状态

在 store/index.js 中定义搜索状态：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    searchKeyword: '' // 全局搜索关键词
  },
  mutations: {
    setSearchKeyword(state, keyword) {
      state.searchKeyword = keyword
    }
  },
  actions: {
    updateSearchKeyword({ commit }, keyword) {
      commit('setSearchKeyword', keyword)
    }
  }
})

（2）创建全局搜索组件

在组件中触发搜索事件：

<template>
  <view>
    <input 
      v-model="keyword" 
      placeholder="输入关键词搜索" 
      @input="onSearch"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    onSearch() {
      // 分发到 Vuex
      this.$store.dispatch('updateSearchKeyword', this.keyword)
    }
  }
}
</script>

（3）在目标页面监听搜索

在需要搜索的页面监听 Vuex 状态变化：

<template>
  <view>
    <!-- 显示搜索结果的列表 -->
    <view v-for="item in filteredList" :key="item.id">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['searchKeyword']),
    // 根据关键词过滤列表
    filteredList() {
      if (!this.searchKeyword) return this.originalList
      return this.originalList.filter(item => 
        item.name.includes(this.searchKeyword)
      )
    }
  },
  data() {
    return {
      originalList: [ // 原始数据列表
        { id: 1, name: '示例项目1' },
        { id: 2, name: '测试项目2' }
      ]
    }
  }
}
</script>

3. 优化建议

  • 防抖处理：在搜索输入时加入防抖（例如 300ms），避免频繁触发搜索。
  • 多页面支持：在 App.vue 中引入搜索组件，或通过导航栏集成。
  • 本地缓存：可结合 uni.setStorageSync 缓存历史搜索记录。

4. 注意事项

  • 确保所有需要搜索的页面已绑定到 Vuex。
  • 复杂数据可结合 WebSQL 或云开发数据库实现更高效搜索。

以上方法适用于大多数 UniApp 全局搜索场景，根据实际需求调整数据源和过滤逻辑即可。

回到顶部