当前位置：首页 > VUE

vue如何实现搜索功能

2026-02-22 00:18:43VUE

实现搜索功能的方法

在Vue中实现搜索功能通常涉及以下几个关键步骤：

数据绑定与输入监听 使用v-model双向绑定搜索输入框的值到Vue实例的data属性。同时可以添加@input或@change事件监听用户输入变化：

<template>
  <input v-model="searchQuery" @input="handleSearch" placeholder="搜索...">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [] // 原始数据列表
    }
  },
  methods: {
    handleSearch() {
      // 搜索逻辑
    }
  }
}
</script>

计算属性过滤 对于本地数据搜索，推荐使用计算属性实现过滤逻辑，这种方式具有自动缓存和高效的特点：

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

API异步搜索 当需要从后端获取搜索结果时，可以使用watch监听搜索词变化并调用API：

watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) { // 防抖阈值
      this.debouncedSearch()
    }
  }
},
created() {
  this.debouncedSearch = _.debounce(this.fetchResults, 500) // Lodash防抖
},
methods: {
  async fetchResults() {
    const response = await axios.get('/api/search', {
      params: { q: this.searchQuery }
    })
    this.results = response.data
  }
}

功能增强技巧

防抖处理 使用Lodash的_.debounce或自定义防抖函数减少频繁请求：

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, arguments), delay)
  }
}

高亮显示匹配项 在渲染搜索结果时使用正则表达式高亮匹配文本：

<template>
  <div v-html="highlight(item.name, searchQuery)"></div>
</template>

<script>
methods: {
  highlight(text, query) {
    const regex = new RegExp(query, 'gi')
    return text.replace(regex, match => `<span class="highlight">${match}</span>`)
  }
}
</script>

多条件搜索 扩展过滤逻辑支持多个字段搜索：

computed: {
  filteredItems() {
    const query = this.searchQuery.toLowerCase()
    return this.items.filter(item => 
      item.name.toLowerCase().includes(query) ||
      item.description.toLowerCase().includes(query)
    )
  }
}

第三方库集成

使用Fuse.js实现模糊搜索 安装Fuse.js并配置搜索选项：

import Fuse from 'fuse.js'

created() {
  this.fuse = new Fuse(this.items, {
    keys: ['name', 'description'],
    threshold: 0.4
  })
},
computed: {
  fuzzyResults() {
    return this.searchQuery 
      ? this.fuse.search(this.searchQuery).map(r => r.item)
      : this.items
  }
}

使用VueUse的useDebounceFn 从@vueuse/core库获取优化过的防抖函数：

vue如何实现搜索功能

import { useDebounceFn } from '@vueuse/core'

setup() {
  const searchQuery = ref('')
  const debouncedSearch = useDebounceFn(() => {
    // 搜索逻辑
  }, 500)
  return { searchQuery, debouncedSearch }
}