自动提示文本框vue

以下是一个基于Vue的自动提示文本框的实现方法：

1. 在HTML文件中添加一个文本框和一个提示框：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="handleInput">
    <div class="hintBox" v-show="showHint">
      <div class="hintItem" v-for="(item, index) in hintList" :key="index"click="handleItemClick(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

2. 在Vue实例中定义data和methods：

<script>
export default {
  data() {
    return {
      inputValue: '', // 输入框的值
      hintList: [], // 提示框中的提示列表
      showHint: false // 是否显示提示框
    }
  },
  methods: {
    handleInput() {
      // 根据输入框的值获取提示列表
      // 这里可以使用axios等工具向后端请求数据
      // 这里使用一个假的提示列表作为例子
      this.hintList = ['apple', 'banana', 'orange', 'pear'].filter(item => item.includes(this.inputValue))
      this.showHint = this.hintList.length > 0 // 如果有提示项，则显示提示框
    },
    handleItemClick(item) {
      this.inputValue = item // 点击提示项后，将其填入输入框
      this.showHint = false // 隐藏提示框
    }
  }
}
</script>

3. 在CSS文件中添加样式：

.hintBox {
  width: 100%;
  max-height: 120px;
  overflow-y:scroll;
  overflow-x: auto;
  position: absolute;
  z-index: 999;
  background-color: #fff;
}

.hintItem {
  margin-top: 2px;
  cursor:pointer;
  margin-left: 45px;
  font-size: 13px;
  color: #898989;
}