vue实现搜索提示

Vue 实现搜索提示功能

使用 Vue 实现搜索提示功能可以通过多种方式完成，以下是几种常见的方法：

使用 Vue 的 v-model 和 computed 属性

在 Vue 组件中，通过 v-model 绑定输入框的值，利用 computed 或 watch 监听输入变化，过滤匹配的数据并显示提示列表。

<template>
  <div>
    <input v-model="searchQuery" @input="handleInput" placeholder="搜索...">
    <ul v-if="showSuggestions">
      <li v-for="(item, index) in filteredSuggestions" :key="index" @click="selectSuggestion(item)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: ['Apple', 'Banana', 'Orange', 'Mango'],
      showSuggestions: false
    }
  },
  computed: {
    filteredSuggestions() {
      return this.suggestions.filter(item =>
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  methods: {
    handleInput() {
      this.showSuggestions = this.searchQuery.length > 0
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.showSuggestions = false
    }
  }
}
</script>

结合第三方 API 或后端接口

如果需要从后端获取搜索提示，可以通过 axios 或 fetch 发送请求，动态更新提示列表。

<template>
  <div>
    <input v-model="searchQuery" @input="fetchSuggestions" placeholder="搜索...">
    <ul v-if="suggestions.length">
      <li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchQuery: '',
      suggestions: []
    }
  },
  methods: {
    fetchSuggestions() {
      if (this.searchQuery.length < 2) {
        this.suggestions = []
        return
      }
      axios.get(`/api/suggestions?q=${this.searchQuery}`)
        .then(response => {
          this.suggestions = response.data
        })
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.suggestions = []
    }
  }
}
</script>

使用防抖优化性能

频繁触发搜索请求可能导致性能问题，可以通过防抖（debounce）函数优化输入事件。

<script>
import { debounce } from 'lodash'

export default {
  methods: {
    fetchSuggestions: debounce(function() {
      if (this.searchQuery.length < 2) {
        this.suggestions = []
        return
      }
      axios.get(`/api/suggestions?q=${this.searchQuery}`)
        .then(response => {
          this.suggestions = response.data
        })
    }, 300)
  }
}
</script>

使用 Vue 插件或组件库

如果不想手动实现，可以使用现成的 Vue 组件库，如 Element UI 或 Vuetify，它们提供了内置的搜索提示组件。

<template>
  <div>
    <el-autocomplete
      v-model="searchQuery"
      :fetch-suggestions="fetchSuggestions"
      placeholder="搜索..."
      @select="handleSelect"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    fetchSuggestions(query, cb) {
      axios.get(`/api/suggestions?q=${query}`)
        .then(response => {
          cb(response.data)
        })
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

通过以上方法，可以灵活地实现 Vue 的搜索提示功能，并根据需求选择合适的方式。