Vue中实现输入框的自动补全功能

一、百度文心一言的结果

在Vue中实现输入框的自动补全功能，可以使用原生的input事件监听用户的输入，并通过计算属性或方法来提供匹配的自动补全建议。以下是一个简单的例子：

<template>
  <div>
    <input type="text" v-model="userInput" @input="updateSuggestions">
    <ul v-if="suggestions.length">
      <li v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)">{{ suggestion }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInput: '',
      suggestions: [],
      // 这里是一个示例的自动补全数据源
      dataSource: ['apple', 'banana', 'cherry', 'date', 'fig', 'grape']
    };
  },
  methods: {
    updateSuggestions() {
      // 使用filter方法根据用户输入过滤数据源
      this.suggestions = this.dataSource.filter(item => item.startsWith(this.userInput));
    },
    selectSuggestion(suggestion) {
      this.userInput = suggestion;
      this.suggestions = []; // 选择之后清空建议列表
    }
  }
};
</script>

<style>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  cursor: pointer;
  padding: 5px;
  background: #f0f0f0;
  border-bottom: 1px solid #eee;
}

li:hover {
  background: #e9e9e9;
}
</style>

在这个例子中，我们有一个输入框和一个下拉列表用于显示自动补全的建议。当用户输入时，updateSuggestions 方法会被触发，计算匹配用户输入的补全建议，并更新suggestions数组。当用户点击列表中的项时，selectSuggestion 方法会被触发，用户的输入会被设置为所选择的补全建议，并清空建议列表。

二、项目实战

输入框和下拉框

<el-row type="flex" class="row-bg">
          <el-col :span="12">
            <el-form-item label="地区" prop="area">
              <el-input v-model="ruleForm.area" placeholder="请输入地区" class="input1" style="width: 240px;" @input="autoComplete"></el-input>
            </el-form-item>
          </el-col>
</el-row>
<div class="input_complete" :style="inputCompleteStyle" v-if="inputComplete">
   <div v-for="item in filterInputCompleteList" :key="item.id" class="complete_data" @click="selectInputComlete(item)">{{item.chiShortName}}</div>
</div>

数据模型

filterInputCompleteList:[],
inputComplete:false,
inputCompleteStyle:{"width":"200px","border":"1px solid #ccc","background":"#FFFFFF"},

@input在输入框内容发生变化后触发

autoComplete(val){
        if(val.length == 0){
          this.inputComplete = false;
          this.filterInputCompleteList = [];
        }else{
          const data = {
            page:1,
            limit:10,
            chiShortName:val
          }
          area.getCountyList(data).then(response => {
            this.filterInputCompleteList = response.data
            if(this.filterInputCompleteList.length == 0){
              this.$message.error('未匹配到相关数据');
            }else{
              this.inputComplete = true;
              this.inputCompleteStyle = {"width":"240px","border":"1px solid #ccc","background":"#FFFFFF","margin-top":"-20px","margin-left":"120px","z-index":"999","position":"absolute"};
            }
          })
        }
      },

当用户点击列表中的项时，selectInputComplete 方法会被触发

//自动补全选择
      selectInputComlete(item){
        this.ruleForm.area = item.chiShortName;
        this.inputComplete = false;
        this.filterInputCompleteList = []; // 选择之后清空建议列表
      },

样式：

<style scoped>
  .complete_data{
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    padding-left: 15px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
  }
</style>

效果：