当前位置：首页 > VUE

vue商品搜索怎么实现

2026-01-22 11:08:56VUE

实现商品搜索功能

在Vue中实现商品搜索功能通常需要结合前端和后端技术。以下是常见的实现方法：

前端实现方案

创建搜索输入框和结果展示组件：

<template>
  <div>
    <input v-model="searchQuery" @input="handleSearch" placeholder="搜索商品...">
    <div v-if="searchResults.length">
      <div v-for="item in searchResults" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </div>
    </div>
  </div>
</template>

添加搜索逻辑：

data() {
  return {
    searchQuery: '',
    searchResults: [],
    allProducts: [] // 初始商品数据
  }
},
methods: {
  handleSearch() {
    if(this.searchQuery.length > 0) {
      this.searchResults = this.allProducts.filter(product => 
        product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    } else {
      this.searchResults = []
    }
  }
}

后端API集成方案

使用axios发送搜索请求：

methods: {
  async handleSearch() {
    if(this.searchQuery.length > 2) { // 防抖阈值
      try {
        const response = await axios.get('/api/products/search', {
          params: { q: this.searchQuery }
        })
        this.searchResults = response.data
      } catch(error) {
        console.error('搜索失败:', error)
      }
    }
  }
}

性能优化技巧

添加防抖功能避免频繁请求：

import _ from 'lodash'

methods: {
  handleSearch: _.debounce(function() {
    // 搜索逻辑
  }, 500)
}

实现高亮显示匹配文本：

vue商品搜索怎么实现

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

完整示例组件

<template>
  <div class="product-search">
    <input 
      v-model="searchQuery" 
      @input="handleSearch" 
      placeholder="输入商品名称..."
      class="search-input"
    >

    <div v-if="loading" class="loading">搜索中...</div>

    <div v-if="searchResults.length" class="results">
      <div 
        v-for="product in searchResults" 
        :key="product.id" 
        class="product-item"
      >
        <h3 v-html="highlightText(product.name)"></h3>
        <p>价格: {{ product.price }}</p>
      </div>
    </div>

    <div v-if="searchQuery && !searchResults.length && !loading" class="no-results">
      没有找到相关商品
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      loading: false,
      debouncedSearch: null
    }
  },
  created() {
    this.debouncedSearch = _.debounce(this.performSearch, 500)
  },
  methods: {
    handleSearch() {
      if(this.searchQuery.trim().length > 2) {
        this.loading = true
        this.debouncedSearch()
      } else {
        this.searchResults = []
      }
    },
    async performSearch() {
      try {
        const response = await axios.get('/api/products/search', {
          params: { q: this.searchQuery }
        })
        this.searchResults = response.data
      } catch(error) {
        console.error('搜索错误:', error)
      } finally {
        this.loading = false
      }
    },
    highlightText(text) {
      if(!this.searchQuery) return text
      const regex = new RegExp(this.searchQuery, 'gi')
      return text.replace(regex, match => `<span class="highlight">${match}</span>`)
    }
  }
}
</script>

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