vue 实现搜索

Vue 实现搜索功能

基础搜索实现

在 Vue 中实现搜索功能通常需要结合 v-model 和计算属性或方法过滤数据。以下是一个基础实现示例：

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

异步搜索实现

对于需要从API获取搜索结果的场景，可以使用 watch 或 methods 配合防抖：

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search..." />
    <ul v-if="results.length">
      <li v-for="result in results" :key="result.id">
        {{ result.title }}
      </li>
    </ul>
    <p v-else>No results found</p>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    }
  },
  watch: {
    searchQuery: _.debounce(function(newVal) {
      if (newVal.length > 2) {
        this.searchAPI(newVal)
      }
    }, 500)
  },
  methods: {
    async searchAPI(query) {
      try {
        const response = await fetch(`https://api.example.com/search?q=${query}`)
        this.results = await response.json()
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

高级搜索功能

实现多条件搜索可以结合多个输入字段和更复杂的过滤逻辑：

<template>
  <div>
    <input v-model="filters.name" placeholder="Name" />
    <select v-model="filters.category">
      <option value="">All Categories</option>
      <option value="fruit">Fruit</option>
      <option value="vegetable">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 {
      filters: {
        name: '',
        category: ''
      },
      items: [
        { id: 1, name: 'Apple', category: 'fruit' },
        { id: 2, name: 'Carrot', category: 'vegetable' },
        { id: 3, name: 'Orange', category: 'fruit' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const nameMatch = item.name.toLowerCase().includes(
          this.filters.name.toLowerCase()
        )
        const categoryMatch = !this.filters.category || 
          item.category === this.filters.category
        return nameMatch && categoryMatch
      })
    }
  }
}
</script>

使用Vuex管理搜索状态

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

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: '',
    searchResults: []
  },
  mutations: {
    SET_SEARCH_QUERY(state, query) {
      state.searchQuery = query
    },
    SET_SEARCH_RESULTS(state, results) {
      state.searchResults = results
    }
  },
  actions: {
    async search({ commit, state }) {
      if (state.searchQuery.length > 2) {
        const response = await fetch(`/api/search?q=${state.searchQuery}`)
        commit('SET_SEARCH_RESULTS', await response.json())
      }
    }
  }
})

组件中使用Vuex搜索

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="updateSearch"
      placeholder="Search..."
    />
    <ul>
      <li v-for="result in searchResults" :key="result.id">
        {{ result.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['searchResults']),
    searchQuery: {
      get() {
        return this.$store.state.searchQuery
      },
      set(value) {
        this.$store.commit('SET_SEARCH_QUERY', value)
      }
    }
  },
  methods: {
    ...mapActions(['search']),
    updateSearch() {
      this.search()
    }
  }
}
</script>

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