当前位置：首页 > uni-app

uniapp 搜索

2026-02-05 18:43:04uni-app

uniapp 搜索功能实现方法

在 uniapp 中实现搜索功能可以通过多种方式，包括前端本地搜索、调用接口进行远程搜索、使用第三方插件等。以下是几种常见的实现方案：

前端本地搜索

适用于数据量较小的情况，直接在前端进行过滤操作。

<template>
  <view>
    <input v-model="keyword" placeholder="请输入搜索关键词" />
    <view v-for="(item, index) in filteredList" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      list: [
        { name: '苹果' },
        { name: '香蕉' },
        { name: '橙子' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => 
        item.name.includes(this.keyword)
      )
    }
  }
}
</script>

调用接口远程搜索

适用于数据量较大的情况，通过 API 请求后端数据进行搜索。

<template>
  <view>
    <input v-model="keyword" @input="handleSearch" placeholder="请输入搜索关键词" />
    <view v-for="(item, index) in searchResult" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    async handleSearch() {
      if (!this.keyword.trim()) {
        this.searchResult = []
        return
      }
      const res = await uni.request({
        url: 'https://example.com/api/search',
        data: { keyword: this.keyword }
      })
      this.searchResult = res.data.list
    }
  }
}
</script>

使用 uniCloud 云开发

如果项目使用 uniCloud，可以直接调用云函数进行搜索。

<template>
  <view>
    <input v-model="keyword" @input="searchFromCloud" placeholder="请输入搜索关键词" />
    <view v-for="(item, index) in cloudData" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      cloudData: []
    }
  },
  methods: {
    async searchFromCloud() {
      const res = await uniCloud.callFunction({
        name: 'search',
        data: { keyword: this.keyword }
      })
      this.cloudData = res.result.data
    }
  }
}
</script>

使用第三方搜索插件

一些第三方插件如 uni-search-bar 可以快速实现搜索栏功能。

<template>
  <view>
    <uni-search-bar @confirm="search" placeholder="搜索"></uni-search-bar>
    <view v-for="(item, index) in resultList" :key="index">
      {{ item.title }}
    </view>
  </view>
</template>

<script>
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
export default {
  components: { uniSearchBar },
  data() {
    return {
      resultList: []
    }
  },
  methods: {
    search(e) {
      console.log(e.value)
      // 调用搜索逻辑
    }
  }
}
</script>