vue.js 实现搜索

Vue.js 实现搜索功能的方法

基础搜索实现

在Vue中实现搜索功能通常需要结合v-model和计算属性。创建一个输入框绑定到数据属性，使用计算属性过滤列表。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <ul>
      <li v-for="item in filteredList" :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: {
    filteredList() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用debounce优化性能

频繁触发搜索会影响性能，可以使用lodash的debounce函数进行优化。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: []
    }
  },
  methods: {
    search: debounce(function() {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }, 500)
  },
  watch: {
    searchQuery() {
      this.search()
    }
  }
}

结合API实现远程搜索

当数据量较大时，可以调用API实现服务器端搜索。

export default {
  methods: {
    async searchItems() {
      try {
        const response = await axios.get('/api/items', {
          params: { q: this.searchQuery }
        })
        this.items = response.data
      } catch (error) {
        console.error(error)
      }
    }
  },
  watch: {
    searchQuery() {
      this.searchItems()
    }
  }
}

高级搜索组件实现

创建一个可复用的搜索组件，支持多种搜索条件和自定义样式。

<template>
  <div class="search-component">
    <input 
      v-model="internalValue"
      @input="handleInput"
      :placeholder="placeholder"
    >
    <button @click="clearSearch">清除</button>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    }
  },
  data() {
    return {
      internalValue: this.value
    }
  },
  methods: {
    handleInput() {
      this.$emit('input', this.internalValue)
    },
    clearSearch() {
      this.internalValue = ''
      this.handleInput()
    }
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal
    }
  }
}
</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 searchItems({ commit, state }) {
      const response = await api.search(state.searchQuery)
      commit('SET_SEARCH_RESULTS', response.data)
    }
  }
})

搜索高亮显示结果

在搜索结果中高亮显示匹配的文本部分。

methods: {
  highlight(text) {
    if (!this.searchQuery) return text
    const regex = new RegExp(this.searchQuery, 'gi')
    return text.replace(regex, match => `<span class="highlight">${match}</span>`)
  }
}

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