闲话不多BB，直接上代码示例

vue：

<el-form-item label="就医机构">
 <el-autocomplete
     class="el-input"
     v-model="formInline.group"
     size="mini"
     :fetch-suggestions="querySearchGroup"
     :trigger-on-focus="false"
     @select="selectGroup"
     @input="groupListMe"
     placeholder="请检索就医机构"
     :clearable="true">
</el-autocomplete>
</el-form-item>
</el-col>

@input来监听输入框，并在输入框值改变时调用groupListMe方法；
@select 搜索出来的数据，确定后事件；
fetch-suggestions 带输入建议的下拉框
clearable 清除输入框按钮

trigger-on-focus：
它分为两种，一种是激活就列出输入建议，一种是输入后匹配输入建议，目前需求是输入后再匹配，所以需要把trigger-on-focus的值设为false.

fetch-suggestions 是一个返回输入建议的方法属性，在该方法中你可以在输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中.

data：

 formInline:{
	     group:''
},
             groupArr:[],
             addHospitalName:[],
             groupList:[],
             arr:[],
             formValidate:{
                hospitalName:""
             }

watch:

watch:{
      'formInline.group': {
       deep: true,//深度监听
       handler: function (newVal,oldVal){
       console.info("watch")
       this.groupArr = [];//这是定义好的用于存放下拉提醒框中数据的数组
      var len = this.groupList.length;//groupList
      var arr = [];
    for (var i = 0; i < len; i++) {//根据输入框中的值进行模糊匹配
if (this.groupList[i].hospitalName.indexOf(this.formInline.group) >= 0) {
               arr.push({
               value:this.groupList[i].hospitalName,
                           id:this.groupList[i].jgDm
                   })
                     }
                  }
                     this.groupArr = arr
                   }

               }
        }

解决在搜索时 未查询到条件 直接按输入信息查询数据：

                  deep: true,
                  handler: function (newVal,oldVal){
                      console.info("watch" + newVal)
                    this.groupArr = [];//这是定义好的用于存放下拉提醒框中数据的数组
                    var len = this.groupList.length;//groupList
                    var arr = [];
                    for (var i = 0; i < len; i++) {//根据输入框中的值进行模糊匹配
                      if (this.groupList[i].hospitalName.indexOf(this.formInline.group) >= 0) {
                        arr.push({
                          value:this.groupList[i].hospitalName,
                          id:this.groupList[i].jgDm
                        })
                      }
                    }

                    if(arr.length >0 && "" != newVal) {
                         this.groupArr = arr
                    }else {
                        this.params.hospitalNo = newVal
                    }

                  }

              }

调用后端查询：

 groupListMe(val) {
       console.info("jinru")
       if(null != this.formInline.group &&  '' != this.formInline.group) {
       this.$post(this.$globalConf.managerPathPrefix + '/xnh/xnhSyDept/findDeptByPy', this.formInline.group).then((response) => {
       console.info(JSON.stringify(response))
       this.groupList = []
       this.groupArr = []
       this.groupList = response.data
       for(let item of this.groupList) {
       this.groupArr.push(                  {value:item.hospitalName,label:item.hospitalName}
                            )
                        }
                        })
                }

            }

回调：

querySearchGroup(queryString, cb) {
              var groupArr = this.groupArr;
              cb(groupArr);
            }

选择确定事件：

 selectGroup(val) {
              // this.groupId = val.id
              console.info(val)
            }