vue前端实现搜索

实现搜索功能的基本思路

在Vue中实现搜索功能通常需要结合数据绑定、事件监听和过滤逻辑。搜索可以针对本地数据或远程API返回的数据进行过滤。

本地数据搜索实现

创建一个搜索框绑定到Vue的data属性，使用计算属性或方法过滤数据列表：

<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>

远程API搜索实现

对于远程数据搜索，通常需要在输入时发送请求到后端API：

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

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

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    }
  },
  created() {
    this.debouncedSearch = _.debounce(this.doSearch, 500)
  },
  methods: {
    doSearch() {
      if(this.searchQuery.trim()) {
        axios.get('/api/search', {
          params: { q: this.searchQuery }
        }).then(response => {
          this.searchResults = response.data
        })
      } else {
        this.searchResults = []
      }
    }
  }
}
</script>

高级搜索功能实现

对于更复杂的搜索需求，可以结合多个筛选条件和Vuex状态管理：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索关键词...">
    <select v-model="categoryFilter">
      <option value="">所有分类</option>
      <option v-for="cat in categories" :value="cat.id">{{ cat.name }}</option>
    </select>

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      categoryFilter: '',
      categories: [
        { id: 1, name: '电子产品' },
        { id: 2, name: '家居用品' }
      ],
      items: [
        { id: 1, name: '手机', category: 1 },
        { id: 2, name: '电视', category: 1 },
        { id: 3, name: '沙发', category: 2 }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const matchesSearch = item.name.toLowerCase().includes(
          this.searchQuery.toLowerCase()
        )
        const matchesCategory = !this.categoryFilter || 
          item.category == this.categoryFilter
        return matchesSearch && matchesCategory
      })
    }
  }
}
</script>

搜索性能优化

对于大数据量列表，考虑以下优化措施：

使用防抖(debounce)技术减少频繁搜索请求

import _ from 'lodash'

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

实现虚拟滚动只渲染可见区域的项目

<template>
  <div style="height: 400px; overflow-y: auto">
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

搜索UI增强

添加加载状态和空状态提示提升用户体验：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <div v-if="isLoading">搜索中...</div>
    <div v-else-if="filteredItems.length === 0">
      没有找到匹配的结果
    </div>
    <ul v-else>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>