vue搜索框功能实现

实现搜索框功能的基本思路

在Vue中实现搜索框功能通常涉及数据绑定、事件监听和过滤逻辑。核心是通过v-model绑定输入框的值，结合计算属性或方法对数据进行实时筛选。

基础实现步骤

创建Vue实例或组件，定义数据数组和搜索关键词的响应式变量

data() {
  return {
    searchQuery: '',
    items: [
      { name: 'Apple', category: 'fruit' },
      { name: 'Carrot', category: 'vegetable' },
      { name: 'Banana', category: 'fruit' }
    ]
  }
}

在模板中添加搜索输入框并绑定数据

<input 
  type="text" 
  v-model="searchQuery" 
  placeholder="Search..."
  class="search-input"
>

实现搜索过滤逻辑

使用计算属性实现实时搜索过滤

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

高级功能扩展

添加防抖优化性能（使用lodash的debounce）

import { debounce } from 'lodash'

methods: {
  handleSearch: debounce(function(query) {
    this.searchQuery = query
  }, 300)
}

支持多条件复合搜索

computed: {
  filteredItems() {
    return this.items.filter(item => {
      const matchesName = item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      const matchesCategory = item.category.toLowerCase().includes(this.categoryFilter.toLowerCase())
      return matchesName && matchesCategory
    })
  }
}

样式与交互优化

添加搜索图标和清除按钮

<div class="search-container">
  <span class="search-icon">🔍</span>
  <input 
    v-model="searchQuery"
    @keyup.enter="performSearch"
  >
  <button 
    v-if="searchQuery" 
    @click="clearSearch"
    class="clear-btn"
  >×</button>
</div>

添加加载状态指示

data() {
  return {
    isLoading: false,
    // ...其他数据
  }
}

methods: {
  async performSearch() {
    this.isLoading = true
    await this.$http.get('/api/items', { params: { q: this.searchQuery } })
    this.isLoading = false
  }
}

与后端API集成

实现异步搜索请求

methods: {
  async fetchResults() {
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      })
      this.results = response.data
    } catch (error) {
      console.error('Search failed:', error)
    }
  }
}

使用watch监听搜索词变化

watch: {
  searchQuery(newVal) {
    if (newVal.length > 2 || newVal.length === 0) {
      this.fetchResults()
    }
  }
}

完整组件示例

<template>
  <div class="search-component">
    <div class="search-box">
      <input
        v-model="searchTerm"
        @input="handleSearch"
        placeholder="Search..."
      />
      <span v-if="loading" class="loading-indicator">Loading...</span>
    </div>

    <ul v-if="results.length" class="results-list">
      <li v-for="item in results" :key="item.id">
        {{ item.name }}
      </li>
    </ul>

    <p v-if="!results.length && searchTerm && !loading">
      No results found
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchTerm: '',
      results: [],
      loading: false,
      debounceTimer: null
    }
  },
  methods: {
    handleSearch() {
      clearTimeout(this.debounceTimer)
      if (this.searchTerm.length < 3) return

      this.loading = true
      this.debounceTimer = setTimeout(async () => {
        try {
          const response = await fetch(`/api/search?q=${encodeURIComponent(this.searchTerm)}`)
          this.results = await response.json()
        } catch (error) {
          console.error('Search error:', error)
        } finally {
          this.loading = false
        }
      }, 500)
    }
  }
}
</script>