输入框自动提示 VUE

你可以使用 Vue.js 组件库中的 Autocomplete 组件来实现输入框自动提示功能。Autocomplete 组件可以根据输入框中的内容，从数据源中匹配出相应的选项并展示出来，用户可以选择其中的一项或继续输入。以下是一个简单的 Autocomplete 组件的例子：

<template>
  <div>
    <input type="text" v-model="searchText" @input="handleInput">
    <ul v-show="showOptions">
      <li v-for="option in options" :key="option" @click="selectOption(option)">{{ option }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      options: [],
      showOptions: false
    }
  },
  methods: {
    handleInput() {
      // 根据输入框中的内容从数据源中匹配出相应的选项
      // 这里可以使用异步请求来获取数据源
      this.options = ['apple', 'banana', 'cherry', 'durian'].filter(option => option.includes(this.searchText))
      this.showOptions = true
    },
    selectOption(option) {
      // 选择了某个选项后，更新输入框的内容并隐藏选项列表
      this.searchText = option
      this.showOptions = false
    }
  }
}
</script>

在这个例子中，我们监听了输入框的输入事件，根据输入框中的内容过滤出匹配的选项，并展示在选项列表中。用户可以通过鼠标点击或键盘操作来选择其中的一项，也可以继续输入。当用户选择了某个选项后，我们会更新输入框的内容并隐藏选项列表。