vue实现建议提示

Vue 实现建议提示的方法

使用 v-model 和计算属性

通过 v-model 绑定输入框的值，利用计算属性实时匹配建议列表。这种方法适合简单的本地数据匹配。

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

<script>
export default {
  data() {
    return {
      inputValue: '',
      dataList: ['Apple', 'Banana', 'Orange', 'Grape']
    }
  },
  computed: {
    suggestions() {
      return this.dataList.filter(item =>
        item.toLowerCase().includes(this.inputValue.toLowerCase())
      )
    }
  },
  methods: {
    selectSuggestion(item) {
      this.inputValue = item
    }
  }
}
</script>

使用第三方组件库

Element UI 或 Vuetify 等组件库提供了现成的自动完成组件，适合快速集成。

<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      dataList: ['Apple', 'Banana', 'Orange', 'Grape']
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.dataList.filter(item =>
            item.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.dataList
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

使用自定义指令

创建自定义指令实现建议提示功能，适合需要高度定制化的场景。

Vue.directive('suggest', {
  bind(el, binding, vnode) {
    const input = el.querySelector('input')
    const list = el.querySelector('ul')
    const dataList = binding.value

    input.addEventListener('input', () => {
      const value = input.value.toLowerCase()
      const suggestions = dataList.filter(item =>
        item.toLowerCase().includes(value)
      )

      list.innerHTML = ''
      suggestions.forEach(item => {
        const li = document.createElement('li')
        li.textContent = item
        li.addEventListener('click', () => {
          input.value = item
          list.innerHTML = ''
        })
        list.appendChild(li)
      })
    })
  }
})

使用 Vuex 管理状态

当建议数据需要跨组件共享时，可以使用 Vuex 集中管理状态。

// store.js
export default new Vuex.Store({
  state: {
    suggestions: []
  },
  mutations: {
    setSuggestions(state, payload) {
      state.suggestions = payload
    }
  },
  actions: {
    updateSuggestions({ commit }, query) {
      const filtered = dataList.filter(item =>
        item.toLowerCase().includes(query.toLowerCase())
      )
      commit('setSuggestions', filtered)
    }
  }
})

防抖优化性能

对于频繁触发的输入事件，使用防抖函数优化性能。

methods: {
  debounce(fn, delay) {
    let timer
    return function() {
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn.apply(this, arguments)
      }, delay)
    }
  },
  handleInput: debounce(function() {
    this.querySearch(this.inputValue)
  }, 300)
}

这些方法可以根据具体需求选择使用，组合使用效果更佳。