当前位置：首页 > VUE

vue搜索实现

2026-03-27 18:41:26VUE

实现搜索功能的基本思路

在Vue中实现搜索功能通常涉及监听用户输入、处理搜索逻辑以及展示结果。以下是几种常见的实现方式：

使用计算属性实现搜索

计算属性适合基于现有数据集的简单搜索，利用Vue的响应式特性自动更新结果：

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

<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>

使用watch实现异步搜索

当需要从API获取搜索结果时，watch配合防抖技术更合适：

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      isLoading: false
    }
  },
  watch: {
    searchQuery: _.debounce(function(newVal) {
      if (newVal.length < 3) return
      this.performSearch(newVal)
    }, 500)
  },
  methods: {
    async performSearch(query) {
      this.isLoading = true
      try {
        const response = await axios.get(`/api/search?q=${query}`)
        this.searchResults = response.data
      } catch (error) {
        console.error(error)
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

使用自定义指令实现搜索高亮

为搜索结果添加高亮效果可以提升用户体验：

<template>
  <div v-highlight="searchQuery">{{ item.description }}</div>
</template>

<script>
export default {
  directives: {
    highlight(el, binding) {
      if (!binding.value) return
      const text = el.textContent
      const regex = new RegExp(binding.value, 'gi')
      el.innerHTML = text.replace(regex, match => 
        `<span class="highlight">${match}</span>`
      )
    }
  }
}
</script>

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

使用Vuex管理搜索状态

在大型应用中，使用Vuex集中管理搜索状态更合理：

// store/modules/search.js
const state = {
  query: '',
  results: []
}

const mutations = {
  SET_QUERY(state, query) {
    state.query = query
  },
  SET_RESULTS(state, results) {
    state.results = results
  }
}

const actions = {
  async search({ commit }, query) {
    commit('SET_QUERY', query)
    const results = await api.search(query)
    commit('SET_RESULTS', results)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

实现搜索建议功能

自动完成或搜索建议可以增强搜索体验：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="getSuggestions"
      @keyup.enter="performSearch"
    >
    <ul v-if="suggestions.length">
      <li 
        v-for="(suggestion, index) in suggestions" 
        :key="index"
        @click="selectSuggestion(suggestion)"
      >
        {{ suggestion }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: []
    }
  },
  methods: {
    async getSuggestions() {
      if (this.searchQuery.length < 2) {
        this.suggestions = []
        return
      }
      const response = await axios.get(`/api/suggest?q=${this.searchQuery}`)
      this.suggestions = response.data
    },
    selectSuggestion(suggestion) {
      this.searchQuery = suggestion
      this.suggestions = []
      this.performSearch()
    }
  }
}
</script>