vue实现商品搜索

实现商品搜索功能

在Vue中实现商品搜索功能通常需要结合前端组件和后端API。以下是实现的基本思路和代码示例：

创建搜索组件

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

数据绑定和方法实现

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      allProducts: [] // 从API获取或本地存储的商品数据
    }
  },
  methods: {
    async handleSearch() {
      if (this.searchQuery.length < 2) {
        this.searchResults = []
        return
      }

      try {
        const response = await this.$axios.get('/api/products/search', {
          params: { q: this.searchQuery }
        })
        this.searchResults = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  },
  async created() {
    // 初始化时加载所有商品数据
    const response = await this.$axios.get('/api/products')
    this.allProducts = response.data
  }
}
</script>

本地搜索实现

如果商品数据量不大，可以考虑前端本地搜索：

methods: {
  handleSearch() {
    if (!this.searchQuery) {
      this.searchResults = []
      return
    }

    this.searchResults = this.allProducts.filter(product => 
      product.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      product.description.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

样式优化

<style scoped>
.search-container {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.search-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.results-container {
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 10;
}

.product-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.product-item:hover {
  background-color: #f5f5f5;
}
</style>

高级功能实现

防抖处理

import _ from 'lodash'

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

搜索建议

methods: {
  async getSuggestions() {
    if (this.searchQuery.length < 2) return

    const response = await this.$axios.get('/api/products/suggest', {
      params: { q: this.searchQuery }
    })
    this.suggestions = response.data
  }
}

多条件筛选

methods: {
  handleSearch() {
    const filters = {
      name: this.searchQuery,
      category: this.selectedCategory,
      priceRange: this.selectedPriceRange
    }

    this.$axios.get('/api/products/search', { params: filters })
      .then(response => {
        this.searchResults = response.data
      })
  }
}

后端API示例

Node.js Express实现的简单搜索API：

router.get('/search', (req, res) => {
  const { q } = req.query
  const results = products.filter(p => 
    p.name.toLowerCase().includes(q.toLowerCase())
  )
  res.json(results)
})

性能优化建议

• 使用索引优化数据库查询
• 考虑实现全文搜索引擎如Elasticsearch
• 对热门搜索词进行缓存
• 实现分页加载搜索结果
• 添加搜索历史记录功能

以上代码和思路可以根据具体项目需求进行调整和扩展，实现更完善的商品搜索功能。