vue element ui el-autocomplete模糊查询功能

文本框获取焦点的时候发送请求，拿回来数据，想搜索数据中的某个值，直接搜索功能，效果图如下：

代码如下:

注意一点：el-autocomplete中数组值的结构必须是{value:'值'}

 

js:
watch:{
    'formInline.group': {
        deep: true,
        handler: function (newVal,oldVal){
          this.groupArr = [];//这是定义好的用于存放下拉提醒框中数据的数组
          var len = this.groupList.length;//groupList
          var arr = [];
          for (var i = 0; i < len; i++) {//根据输入框中的值进行模糊匹配
            if (this.groupList[i].name.indexOf(this.formInline.group) >= 0) {
              arr.push({
                value:this.groupList[i].name,
                id:this.groupList[i].id
              })
            }
          }
          this.groupArr = arr
        }
    },
  },
methods:{
    groupListMe() {
      this.$http.post(url, {
        name:this.formInline.group
      }).then(res => {
          if (res.data.success) {
            this.groupList = []
            this.groupArr = []
            this.groupList = res.data.data.result
            for(let item of this.groupList) {
              this.groupArr.push({
                value:item.name,
                id:item.id
              })
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    querySearchGroup(queryString, cb) {
      var groupArr = this.groupArr;
      cb(groupArr);
    },
    selectGroup(val) {
      this.groupId = val.id
    },
}