当前位置：首页 > VUE

vue实现搜索自动查询

2026-01-20 14:39:12VUE

实现搜索自动查询功能

在Vue中实现搜索自动查询功能，可以通过监听输入框的变化并触发搜索请求来完成。以下是几种常见实现方式：

使用watch监听输入变化

在Vue组件中设置watch来监听搜索关键词的变化，配合防抖函数避免频繁请求：

vue实现搜索自动查询

data() {
  return {
    searchQuery: '',
    results: [],
    debounceTimer: null
  }
},
watch: {
  searchQuery(newVal) {
    clearTimeout(this.debounceTimer)
    this.debounceTimer = setTimeout(() => {
      this.performSearch(newVal)
    }, 500) // 500ms防抖延迟
  }
},
methods: {
  async performSearch(query) {
    if(query.trim() === '') {
      this.results = []
      return
    }
    try {
      const response = await axios.get('/api/search', { params: { q: query } })
      this.results = response.data
    } catch(error) {
      console.error('搜索出错:', error)
    }
  }
}

使用v-model和@input事件

直接在输入框上绑定v-model并监听input事件，结合防抖：

vue实现搜索自动查询

<template>
  <input 
    v-model="searchQuery" 
    @input="onSearchInput" 
    placeholder="输入搜索内容..."
  />
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    }
  },
  methods: {
    onSearchInput: debounce(function() {
      this.performSearch()
    }, 500),
    async performSearch() {
      if(this.searchQuery.trim() === '') {
        this.results = []
        return
      }
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        })
        this.results = response.data
      } catch(error) {
        console.error('搜索出错:', error)
      }
    }
  }
}
</script>

使用Vue自定义指令实现防抖

可以创建一个自定义防抖指令来简化代码：

// 在main.js或单独文件中定义指令
Vue.directive('debounce', {
  inserted(el, binding) {
    let debounceTimeout = null
    el.addEventListener('input', () => {
      clearTimeout(debounceTimeout)
      debounceTimeout = setTimeout(() => {
        binding.value()
      }, binding.arg || 500)
    })
  }
})

// 组件中使用
<template>
  <input 
    v-model="searchQuery" 
    v-debounce:300="performSearch" 
  />
</template>

使用计算属性优化

对于简单场景，可以使用计算属性配合watch：

computed: {
  trimmedQuery() {
    return this.searchQuery.trim()
  }
},
watch: {
  trimmedQuery(newVal) {
    if(newVal) {
      this.performSearch(newVal)
    } else {
      this.results = []
    }
  }
}