vue实现input输入提示

Vue 实现 Input 输入提示的方法

使用 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: '',
      allItems: ['Apple', 'Banana', 'Orange', 'Mango'],
      suggestions: []
    }
  },
  methods: {
    handleInput() {
      this.suggestions = this.allItems.filter(item =>
        item.toLowerCase().includes(this.inputValue.toLowerCase())
      )
    },
    selectSuggestion(item) {
      this.inputValue = item
      this.suggestions = []
    }
  }
}
</script>

使用第三方库 vue-autosuggest

vue-autosuggest 是一个专门为 Vue 设计的自动完成组件，提供更丰富的功能和配置选项。

安装依赖：

npm install vue-autosuggest

使用示例：

<template>
  <vue-autosuggest
    :suggestions="filteredOptions"
    :input-props="{ placeholder: 'Search...' }"
    @input="onInputChange"
    @selected="onSelected"
  >
    <template #suggestion="{ suggestion }">
      {{ suggestion.item }}
    </template>
  </vue-autosuggest>
</template>

<script>
import { VueAutosuggest } from 'vue-autosuggest'

export default {
  components: {
    VueAutosuggest
  },
  data() {
    return {
      suggestions: [],
      allOptions: ['Red', 'Green', 'Blue', 'Yellow']
    }
  },
  computed: {
    filteredOptions() {
      return [
        {
          data: this.suggestions
        }
      ]
    }
  },
  methods: {
    onInputChange(text) {
      this.suggestions = this.allOptions.filter(option =>
        option.toLowerCase().includes(text.toLowerCase())
      )
    },
    onSelected(item) {
      console.log('Selected:', item)
    }
  }
}
</script>

使用 Element UI 的 Autocomplete 组件

如果项目中使用 Element UI，可以直接使用其提供的 Autocomplete 组件实现输入提示功能。

安装 Element UI：

npm install element-ui

使用示例：

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

<script>
export default {
  data() {
    return {
      inputValue: '',
      items: ['JavaScript', 'TypeScript', 'Vue', 'React']
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.items.filter(item =>
            item.toLowerCase().includes(queryString.toLowerCase())
          )
        : this.items
      cb(results)
    },
    handleSelect(item) {
      console.log(item)
    }
  }
}
</script>

自定义指令实现输入提示

对于需要更高度定制化的场景，可以创建自定义指令来实现输入提示功能。

<template>
  <input v-model="inputValue" v-input-suggest="suggestions" />
</template>

<script>
export default {
  directives: {
    inputSuggest: {
      bind(el, binding, vnode) {
        el.addEventListener('input', () => {
          const value = el.value
          const suggestions = binding.value
          // 实现提示逻辑
        })
      }
    }
  },
  data() {
    return {
      inputValue: '',
      suggestions: ['Option 1', 'Option 2', 'Option 3']
    }
  }
}
</script>

使用 Vue 3 Composition API

在 Vue 3 中，可以使用 Composition API 更灵活地实现输入提示功能。

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

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const inputValue = ref('')
    const allItems = ['Vue', 'React', 'Angular', 'Svelte']
    const suggestions = ref([])

    const updateSuggestions = () => {
      suggestions.value = allItems.filter(item =>
        item.toLowerCase().includes(inputValue.value.toLowerCase())
      )
    }

    const selectItem = item => {
      inputValue.value = item
      suggestions.value = []
    }

    return {
      inputValue,
      suggestions,
      updateSuggestions,
      selectItem
    }
  }
}
</script>

以上方法提供了不同复杂度和定制化程度的实现方案，可以根据项目需求选择最适合的方式。