使用vue实现搜索

使用 Vue 实现搜索功能

基础搜索实现

在 Vue 中实现搜索功能通常涉及数据绑定、事件监听和列表过滤。以下是一个简单的实现方式：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Vuex 实现全局搜索

对于大型应用，可以使用 Vuex 管理搜索状态：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    searchQuery: '',
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Orange' }
    ]
  },
  getters: {
    filteredItems: state => {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
      )
    }
  },
  mutations: {
    updateSearchQuery(state, query) {
      state.searchQuery = query
    }
  }
})

<!-- SearchComponent.vue -->
<template>
  <div>
    <input 
      :value="searchQuery" 
      @input="updateSearchQuery($event.target.value)" 
      placeholder="Search..."
    />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['searchQuery']),
    ...mapGetters(['filteredItems'])
  },
  methods: {
    ...mapMutations(['updateSearchQuery'])
  }
}
</script>

异步搜索实现

对于需要从API获取搜索结果的场景：

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="debouncedSearch" 
      placeholder="Search..."
    />
    <ul v-if="!loading">
      <li v-for="result in searchResults" :key="result.id">
        {{ result.title }}
      </li>
    </ul>
    <div v-else>Loading...</div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      loading: false
    }
  },
  created() {
    this.debouncedSearch = _.debounce(this.performSearch, 500)
  },
  methods: {
    async performSearch() {
      if (!this.searchQuery.trim()) {
        this.searchResults = []
        return
      }

      this.loading = true
      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(this.searchQuery)}`)
        this.searchResults = await response.json()
      } catch (error) {
        console.error('Search failed:', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

高级搜索功能

实现包含多个条件的复杂搜索：

<template>
  <div>
    <input v-model="searchParams.keyword" placeholder="Keyword..." />
    <select v-model="searchParams.category">
      <option value="">All Categories</option>
      <option value="books">Books</option>
      <option value="electronics">Electronics</option>
    </select>
    <input 
      type="number" 
      v-model.number="searchParams.minPrice" 
      placeholder="Min price"
    />

    <button @click="search">Search</button>

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

<script>
export default {
  data() {
    return {
      searchParams: {
        keyword: '',
        category: '',
        minPrice: 0
      },
      products: [
        { id: 1, name: 'Laptop', price: 999, category: 'electronics' },
        { id: 2, name: 'Book', price: 20, category: 'books' },
        { id: 3, name: 'Phone', price: 699, category: 'electronics' }
      ]
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        const matchesKeyword = product.name.toLowerCase().includes(
          this.searchParams.keyword.toLowerCase()
        )
        const matchesCategory = !this.searchParams.category || 
          product.category === this.searchParams.category
        const matchesPrice = product.price >= this.searchParams.minPrice

        return matchesKeyword && matchesCategory && matchesPrice
      })
    }
  },
  methods: {
    search() {
      // 如果需要执行额外操作可以在这里添加
      // 计算属性会自动更新
    }
  }
}
</script>

这些实现方式涵盖了从基础到高级的搜索功能，可以根据具体需求选择适合的方案。