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

效果

输入${@    即可弹出内容

2、选中即可填充

 代码：

1、templet

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]+"}"

}

}