使用vue实现搜索

使用 Vue 实现搜索功能

数据绑定与输入监听

在 Vue 中，通过 v-model 实现输入框与数据的双向绑定，监听用户输入的变化。

<template>
  <input v-model="searchQuery" placeholder="输入搜索内容" />
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  }
}
</script>

过滤数据列表

使用计算属性 computed 对数据列表进行过滤，根据输入的关键词动态返回匹配的结果。

<template>
  <input v-model="searchQuery" placeholder="输入搜索内容" />
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredList() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

添加防抖优化

对于频繁的输入事件，可以通过防抖函数（如 Lodash 的 _.debounce）减少计算属性的触发频率。

<script>
import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ]
    }
  },
  computed: {
    filteredList: _.debounce(function() {
      return this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }, 300)
  }
}
</script>

调用 API 实现远程搜索

当需要从服务器获取搜索结果时，可以在 watch 中监听输入变化并调用 API。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    }
  },
  watch: {
    searchQuery(newVal) {
      if (newVal.length > 2) {
        this.fetchSearchResults(newVal)
      }
    }
  },
  methods: {
    async fetchSearchResults(query) {
      try {
        const response = await axios.get(`/api/search?q=${query}`)
        this.searchResults = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  }
}
</script>

显示加载状态

在远程搜索时，添加加载状态提示提升用户体验。

<template>
  <input v-model="searchQuery" placeholder="输入搜索内容" />
  <div v-if="isLoading">搜索中...</div>
  <ul v-else>
    <li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      isLoading: false
    }
  },
  watch: {
    searchQuery(newVal) {
      if (newVal.length > 2) {
        this.fetchSearchResults(newVal)
      }
    }
  },
  methods: {
    async fetchSearchResults(query) {
      this.isLoading = true
      try {
        const response = await axios.get(`/api/search?q=${query}`)
        this.searchResults = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

添加空结果提示

当搜索结果为空时，显示友好提示。

<template>
  <input v-model="searchQuery" placeholder="输入搜索内容" />
  <div v-if="isLoading">搜索中...</div>
  <ul v-else-if="searchResults.length">
    <li v-for="item in searchResults" :key="item.id">{{ item.name }}</li>
  </ul>
  <div v-else>没有找到匹配的结果</div>
</template>