element的input框修改为可输入可下拉

html结构：
<el-autocomplete
      ref="department"
      clearable
      class="inline-input"
      v-model="form.sendInfoRequestDTO.department"
      :fetch-suggestions="querySearch1"
      placeholder="请输入内容"
      @select="handleSelect1"
      @clear="clearDepart"
    >
</el-autocomplete>

js内容：
    querySearch1(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) :     
         restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
    handleSelect1(item) {
        console.log(item);
        this.form.sendInfoRequestDTO.doctorName=item.address
      },
   createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      }
增加一个×的图标，并写上方法
 clearDepart(){
      this.form.sendInfoRequestDTO.department=''
      console.log(this.$refs.department);
       this.$nextTick((x)=>{   //正确写法
       this.$refs.doctor.focus();
       this.$refs.department.focus();
    })
    },

data中数据源结构：
   this.restaurants =[
          { value: "科室1", address: '医生1' },
          { value: "科室2", address: '上医生2' },
        ];