当前位置：首页 > VUE

用vue实现搜索查询

2026-01-07 02:58:13VUE

实现搜索查询的基本思路

在Vue中实现搜索查询功能通常涉及以下几个核心部分：数据绑定、事件监听、过滤逻辑和UI反馈。以下是一个完整的实现方案。

数据绑定与输入框

创建一个Vue组件，包含一个输入框用于接收用户输入的搜索关键词。使用v-model实现双向数据绑定，确保输入内容实时同步到Vue实例中。

<template>
  <div>
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="输入搜索关键词"
    />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

定义数据与搜索逻辑

在Vue实例的data中定义原始数据列表和搜索关键词，并通过计算属性filteredItems实现实时过滤逻辑。计算属性会根据searchQuery的变化自动更新结果。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

优化搜索性能

对于大型数据集，直接使用includes或filter可能导致性能问题。可以通过以下方式优化：

添加防抖（debounce）逻辑，减少频繁触发搜索。
使用Web Worker处理复杂计算。
对搜索结果进行分页加载。

防抖实现示例（使用Lodash）：

import { debounce } from 'lodash'

export default {
  methods: {
    handleSearch: debounce(function() {
      // 搜索逻辑
    }, 300)
  }
}

高亮匹配结果

在渲染搜索结果时，可以通过自定义过滤器或方法高亮显示匹配的关键词部分。

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

异步搜索与API集成

若需从后端API获取搜索结果，可以使用axios或fetch发起异步请求，并在回调中更新数据。

methods: {
  async fetchResults() {
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      })
      this.items = response.data
    } catch (error) {
      console.error(error)
    }
  }
},
watch: {
  searchQuery(newVal) {
    if (newVal.length > 2) this.fetchResults()
  }
}

完整组件示例

以下是一个整合了上述功能的完整组件代码：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="handleInput"
      placeholder="输入搜索关键词"
    />
    <ul v-if="filteredItems.length">
      <li v-for="item in filteredItems" :key="item.id">
        <span v-html="highlight(item.name)"></span>
      </li>
    </ul>
    <p v-else>无匹配结果</p>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: []
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    highlight(text) {
      const regex = new RegExp(this.searchQuery, 'gi')
      return text.replace(regex, match => `<span class="highlight">${match}</span>`)
    },
    handleInput: debounce(function() {
      if (this.searchQuery.length > 2) {
        this.fetchResults()
      }
    }, 300),
    async fetchResults() {
      try {
        const response = await fetch(`/api/search?q=${this.searchQuery}`)
        this.items = await response.json()
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  }
}
</script>

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

用vue实现搜索查询