当前位置：首页 > VUE

vue实现自动搜索

2026-01-15 01:30:15VUE

Vue 实现自动搜索功能

实现自动搜索功能通常需要结合输入框的监听、防抖处理和异步请求。以下是几种常见的实现方法：

监听输入框变化并触发搜索

在输入框上绑定 v-model 和 @input 事件，当用户输入时触发搜索函数：

vue实现自动搜索

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      timeout: null
    }
  },
  methods: {
    handleSearch() {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.performSearch()
      }, 500) // 500ms防抖延迟
    },
    performSearch() {
      if (this.searchQuery.trim()) {
        // 调用API或本地搜索逻辑
        console.log('搜索:', this.searchQuery)
      }
    }
  }
}
</script>

使用计算属性实现自动搜索

当搜索逻辑不涉及API请求时，可以使用计算属性自动响应数据变化：

<template>
  <input v-model="searchQuery" placeholder="搜索...">
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [] // 原始数据
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

结合第三方库实现高级搜索

对于更复杂的搜索需求，可以集成专门的搜索库如 Fuse.js：

vue实现自动搜索

import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      items: [], // 原始数据
      fuse: null
    }
  },
  mounted() {
    this.fuse = new Fuse(this.items, {
      keys: ['name', 'description'], // 可搜索的字段
      threshold: 0.4 // 匹配阈值
    })
  },
  computed: {
    searchResults() {
      return this.searchQuery 
        ? this.fuse.search(this.searchQuery).map(r => r.item)
        : this.items
    }
  }
}

使用自定义指令实现自动搜索

创建自定义指令来自动处理搜索逻辑：

Vue.directive('auto-search', {
  inserted(el, binding) {
    el.addEventListener('input', () => {
      clearTimeout(el._searchTimer)
      el._searchTimer = setTimeout(() => {
        binding.value(el.value)
      }, 300)
    })
  }
})

// 使用方式
<input v-auto-search="performSearch" placeholder="搜索...">

服务端搜索实现

当需要从服务端获取搜索结果时：

methods: {
  async performSearch() {
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      })
      this.results = response.data
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
}