elementUI 之 Input 输入框,带输入建议 autocomplete
程序员文章站
2022-03-04 11:29:26
...
业务需要一个文本输入框,带快捷输入,并且输入框的值最后是输入内容拼上快捷键,最后使用element 中的autocomplet带输入建议的标签来实现这一功能;
直接上代码
<el-autocomplete
class="inline-input"
v-model="form.text"
:fetch-suggestions="querySearch"
placeholder="示例:亲爱的@[email protected],您于@[email protected]缴纳@[email protected]元,预计今日到账,请注意查收!"
:trigger-on-focus="false"
@select="handleSelect" //选择下拉列表时触发的事件
type="textarea"
@keyup.enter.native="handleKeyup" //按回车按钮时触发的事件
></el-autocomplete>
data(){
return{
str: "",
restaurants: [{ value: "@[email protected]", address: "关键字" }],
}
}
因为我的快捷输入只有一个关键字匹配,所以restaurants数组我初始化时就定义好了
对应的事件
querySearch(queryString, cb) { //可以事实获取你输入的值
this.str = queryString;
queryString = queryString.charAt(queryString.length - 1);
let restaurants = this.restaurants;
let results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return ( restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
handleSelect(item) {//这里我根据业务需求做了修改,将输入的值和快捷输入拼接在了一起
let str = this.str;
str = str.slice(0, str.length - 1);
this.form.text = str + item.value;
},
handleKeyup() {//这一步根据用户按enter键时对应的触发
let str = this.str;
str = str.slice(0, str.length - 1);
this.form.text = str + this.restaurants[0].value;
},
上一篇: pandas提取时间中的年份
下一篇: WPF 通过MVVM绑定自定义命令