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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM