vue 实现搜索功能

实现基础搜索功能

在Vue中实现搜索功能可以通过v-model绑定输入框，结合计算属性或方法过滤数据。以下是一个基础实现示例：

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用防抖优化性能

频繁触发搜索会导致性能问题，可以使用lodash的debounce函数实现防抖：

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: []
    }
  },
  watch: {
    searchQuery: debounce(function(newVal) {
      this.filterItems(newVal)
    }, 300)
  },
  methods: {
    filterItems(query) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  }
}

实现多字段搜索

当需要搜索多个字段时，可以扩展过滤逻辑：

computed: {
  filteredItems() {
    const query = this.searchQuery.toLowerCase()
    return this.items.filter(item => 
      item.name.toLowerCase().includes(query) ||
      item.description.toLowerCase().includes(query)
    )
  }
}

结合后端API搜索

对于大量数据，建议使用后端搜索API：

methods: {
  async searchItems() {
    try {
      const response = await axios.get('/api/items', {
        params: { q: this.searchQuery }
      })
      this.filteredItems = response.data
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
},
watch: {
  searchQuery(newVal) {
    if (newVal.length > 2 || newVal.length === 0) {
      this.searchItems()
    }
  }
}

添加搜索建议

实现自动完成搜索建议功能：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="getSuggestions"
      @keydown.down="highlightNext"
      @keydown.up="highlightPrev"
      @keydown.enter="selectSuggestion"
    >
    <ul v-if="suggestions.length">
      <li 
        v-for="(suggestion, index) in suggestions"
        :key="index"
        :class="{ highlighted: index === highlightedIndex }"
        @click="selectSuggestion(index)"
      >
        {{ suggestion }}
      </li>
    </ul>
  </div>
</template>

实现高级搜索过滤器

添加多个搜索条件作为过滤器：

<template>
  <div>
    <input v-model="filters.name" placeholder="名称">
    <input v-model="filters.category" placeholder="分类">
    <input type="number" v-model.number="filters.minPrice" placeholder="最低价格">

    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        category: '',
        minPrice: 0
      },
      items: [] // 你的数据
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return (
          item.name.toLowerCase().includes(this.filters.name.toLowerCase()) &&
          item.category.toLowerCase().includes(this.filters.category.toLowerCase()) &&
          item.price >= this.filters.minPrice
        )
      })
    }
  }
}
</script>