当前位置：首页 > VUE

vue实现商品搜索功能

2026-01-20 09:12:47VUE

Vue 实现商品搜索功能

数据准备与绑定

在 Vue 组件中定义商品数据列表和搜索关键词。商品数据可以存储在 data 属性中，搜索关键词通过 v-model 双向绑定到输入框。

<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 }
      ]
    }
  }
}
</script>

计算属性实现搜索逻辑

使用 computed 属性动态过滤商品列表。通过 filter 方法匹配商品名称或描述是否包含搜索关键词（不区分大小写）。

computed: {
  filteredProducts() {
    return this.products.filter(product => {
      return product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    })
  }
}

优化搜索性能

对于大量数据，可以添加防抖（debounce）功能减少频繁计算。通过 lodash.debounce 或自定义函数实现延迟搜索。

import debounce from 'lodash.debounce'

export default {
  methods: {
    handleSearch: debounce(function() {
      this.filteredProducts = this.products.filter(product => 
        product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }, 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>`)
  }
}

样式增强

添加基础样式提升用户体验，例如输入框聚焦效果、结果列表间距和高亮颜色。

input {
  padding: 8px;
  width: 300px;
}
.highlight {
  background-color: yellow;
  font-weight: bold;
}

后端搜索集成（可选）

若数据量较大，需通过 API 请求后端搜索接口。在输入框监听 input 或 change 事件，发送异步请求并更新结果。

methods: {
  async fetchSearchResults() {
    const response = await axios.get('/api/products', {
      params: { q: this.searchQuery }
    })
    this.filteredProducts = response.data
  }
}