实现vue前端搜索

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

高级搜索功能

对于更复杂的搜索需求，可以添加多个搜索条件和逻辑：

<template>
  <div>
    <input v-model="searchParams.keyword" placeholder="关键词">
    <select v-model="searchParams.category">
      <option value="">所有分类</option>
      <option value="fruit">水果</option>
      <option value="vegetable">蔬菜</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 {
      searchParams: {
        keyword: '',
        category: ''
      },
      items: [
        { id: 1, name: '苹果', category: 'fruit' },
        { id: 2, name: '胡萝卜', category: 'vegetable' },
        { id: 3, name: '香蕉', category: 'fruit' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const matchesKeyword = item.name.toLowerCase()
          .includes(this.searchParams.keyword.toLowerCase())
        const matchesCategory = !this.searchParams.category || 
          item.category === this.searchParams.category
        return matchesKeyword && matchesCategory
      })
    }
  }
}
</script>

使用第三方库优化性能

对于大数据集搜索，可以考虑使用lodash的debounce函数来减少计算频率：

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

<script>
import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [...], // 大数据集
      filteredItems: []
    }
  },
  methods: {
    performSearch() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    },
    onSearchInput: debounce(function() {
      this.performSearch()
    }, 300)
  },
  created() {
    this.performSearch() // 初始化显示所有项目
  }
}
</script>

服务器端搜索集成

当数据量很大时，应该考虑实现服务器端搜索：

<template>
  <div>
    <input v-model="searchQuery" @input="fetchResults" placeholder="搜索...">
    <ul v-if="!loading">
      <li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
    </ul>
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      loading: false,
      cancelToken: null
    }
  },
  methods: {
    fetchResults() {
      if (this.cancelToken) {
        this.cancelToken.cancel('取消之前的请求')
      }

      this.cancelToken = axios.CancelToken.source()
      this.loading = true

      axios.get('/api/search', {
        params: { q: this.searchQuery },
        cancelToken: this.cancelToken.token
      }).then(response => {
        this.searchResults = response.data
        this.loading = false
      }).catch(error => {
        if (!axios.isCancel(error)) {
          console.error('搜索错误:', error)
          this.loading = false
        }
      })
    }
  }
}
</script>

搜索建议实现

添加搜索建议功能提升用户体验：

<template>
  <div>
    <div class="search-container">
      <input 
        v-model="searchQuery" 
        @input="showSuggestions = true"
        @blur="hideSuggestions"
        placeholder="搜索..."
      >
      <ul v-show="showSuggestions && suggestions.length" class="suggestions">
        <li 
          v-for="suggestion in suggestions" 
          :key="suggestion"
          @mousedown="selectSuggestion(suggestion)"
        >
          {{ suggestion }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      showSuggestions: false,
      allItems: ['苹果', '香蕉', '橙子', '西瓜', '草莓']
    }
  },
  computed: {
    suggestions() {
      if (!this.searchQuery) return []
      return this.allItems.filter(item =>
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      ).slice(0, 5)
    }
  },
  methods: {
    selectSuggestion(suggestion) {
      this.searchQuery = suggestion
      this.showSuggestions = false
    },
    hideSuggestions() {
      setTimeout(() => {
        this.showSuggestions = false
      }, 200)
    }
  }
}
</script>

<style>
.search-container {
  position: relative;
}
.suggestions {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 10;
}
.suggestions li {
  padding: 8px 12px;
  cursor: pointer;
}
.suggestions li:hover {
  background: #f5f5f5;
}
</style>

以上方法提供了从基础到高级的Vue搜索功能实现方案，可以根据具体需求选择适合的方式或组合使用。