elementUI 之 Input 输入框，带输入建议 autocomplete

业务需要一个文本输入框，带快捷输入，并且输入框的值最后是输入内容拼上快捷键，最后使用element 中的autocomplet带输入建议的标签来实现这一功能；
直接上代码

<el-autocomplete
    class="inline-input"
    v-model="form.text"
    :fetch-suggestions="querySearch"
    placeholder="示例：亲爱的@username@，您于@date@缴纳@monney@元，预计今日到账，请注意查收！"
    :trigger-on-focus="false"
   @select="handleSelect" //选择下拉列表时触发的事件
    type="textarea"
   @keyup.enter.native="handleKeyup" //按回车按钮时触发的事件
></el-autocomplete>

data(){
	return{
		str: "",
      restaurants: [{ value: "@xxx@", 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;
    },