vue实现商品搜索

实现商品搜索功能

在Vue中实现商品搜索功能，可以通过以下方法完成。这里假设有一个商品列表数据，需要实现前端搜索过滤功能。

基础实现方案

创建计算属性过滤商品列表

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索商品...">
    <ul>
      <li v-for="product in filteredProducts" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      products: [
        { id: 1, name: '手机', price: 2999 },
        { id: 2, name: '笔记本电脑', price: 5999 },
        { id: 3, name: '耳机', price: 399 }
      ]
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        return product.name.toLowerCase().includes(
          this.searchQuery.toLowerCase()
        )
      })
    }
  }
}
</script>

增强搜索功能

添加多字段搜索和防抖优化

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="搜索商品名称或描述..."
      @input="onSearchInput"
    >
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      products: [],
      allProducts: []
    }
  },
  created() {
    this.fetchProducts()
  },
  methods: {
    fetchProducts() {
      // API调用获取所有商品
      this.allProducts = [
        { id: 1, name: '手机', description: '智能手机', price: 2999 },
        { id: 2, name: '笔记本', description: '轻薄本', price: 5999 }
      ]
      this.products = [...this.allProducts]
    },
    searchProducts: debounce(function() {
      const query = this.searchQuery.toLowerCase()
      if (!query) {
        this.products = [...this.allProducts]
        return
      }

      this.products = this.allProducts.filter(product => {
        return (
          product.name.toLowerCase().includes(query) ||
          product.description.toLowerCase().includes(query)
        )
      })
    }, 300),
    onSearchInput() {
      this.searchProducts()
    }
  }
}
</script>

服务端搜索实现

对于大量数据，建议使用服务端搜索

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="搜索商品..."
      @input="onSearchInput"
    >
    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="product in products" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      products: [],
      loading: false
    }
  },
  methods: {
    fetchProducts: debounce(async function() {
      if (!this.searchQuery.trim()) {
        this.products = []
        return
      }

      this.loading = true
      try {
        const response = await axios.get('/api/products/search', {
          params: { q: this.searchQuery }
        })
        this.products = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      } finally {
        this.loading = false
      }
    }, 500),
    onSearchInput() {
      this.fetchProducts()
    }
  }
}
</script>

高级搜索功能

实现带分类筛选的搜索

<template>
  <div>
    <input v-model="searchQuery" placeholder="商品名称">
    <select v-model="selectedCategory">
      <option value="">所有分类</option>
      <option v-for="cat in categories" :value="cat.id" :key="cat.id">
        {{ cat.name }}
      </option>
    </select>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedCategory: '',
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '家居用品' }
      ],
      products: []
    }
  },
  methods: {
    async search() {
      const params = {
        q: this.searchQuery
      }
      if (this.selectedCategory) {
        params.category = this.selectedCategory
      }

      const response = await axios.get('/api/products/search', { params })
      this.products = response.data
    }
  }
}
</script>

搜索建议功能

实现输入时的搜索建议

<template>
  <div>
    <input 
      v-model="searchQuery" 
      placeholder="搜索商品..."
      @input="getSuggestions"
    >
    <ul v-if="suggestions.length">
      <li 
        v-for="suggestion in suggestions" 
        :key="suggestion.id"
        @click="selectSuggestion(suggestion)"
      >
        {{ suggestion.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: []
    }
  },
  methods: {
    getSuggestions: debounce(async function() {
      if (this.searchQuery.length < 2) {
        this.suggestions = []
        return
      }

      const response = await axios.get('/api/products/suggest', {
        params: { q: this.searchQuery }
      })
      this.suggestions = response.data
    }, 300),
    selectSuggestion(suggestion) {
      this.searchQuery = suggestion.name
      this.suggestions = []
      this.searchProducts()
    }
  }
}
</script>

以上实现方案可根据实际项目需求进行组合和调整。对于小型项目，前端过滤足够；对于大型商品目录，建议使用服务端搜索。防抖函数能优化性能，避免频繁请求。