使用VUE+element ui 实现输入框 占位符自动补全功能

效果

输入${@    即可弹出内容

2、选中即可填充

 

 代码：

1、templet

 <el-autocomplete
                type="textarea"
                class="el-input"
                :key="1"
                v-model="form.templet"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入内容"
                :trigger-on-focus="false"
                @select="((item) => {handleSelect(item)})">
</el-autocomplete>

2、ts

autoInputs: any[] = ["", ""]
lastAutoInputs: any[] = ["", ""]
oldAutoInput:string | undefined=''

//返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据。
querySearchAsync(queryString: any, cb: any) {
  this.oldAutoInput=this.form.templet;
  // 为 string 添加 startswith 函数
  if (typeof String.prototype.startsWith != 'function') {
    String.prototype.startsWith = function (prefix) {
      return prefix.slice(0, prefix.length) === prefix;
    }
  }

  // 为 string 添加 endsWitch 函数
  if (typeof String.prototype.endsWith != "function") {
    String.prototype.endsWith = function (suffix) {
      return this.indexOf(suffix, this.length - suffix.length) !== -1;
    }
  }

  var results:any[] = []
  if (queryString.endsWith("${@}") || queryString.endsWith("${@")) {
    results = this.templetList.map(slotName => {//templetList是从后台查询的下拉的数据集
      return {"value":slotName.desc+":"+ slotName.type+'.'+slotName.name+'()'}
    })
  }
  cb(results)
}

// 创建过滤器
createStateFilter(queryString: any) {
  return (program:any) => {
    return (program.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
  };
}

// 取值操作 你选中那行，item就就是那那条数据，直接赋值v-modal就实现回显了。
handleSelect(item:any, index:any) {
  if(this.oldAutoInput.lastIndexOf("${@")>0){
    this.form.templet=this.oldAutoInput.substring(0,this.oldAutoInput.lastIndexOf("${@"))+"${"+item.value.split(":")[1]+"}"
  }
}