一个简单的vue下拉模糊查询

前端代码

<el-autocomplete
  v-model="accountSearch"
  :fetch-suggestions="accounQuerySearchAsync"
  @select="accountHandleSelect"
  :debounce=10
  placeholder="请输入银行名称"
>
</el-autocomplete>

data: () => {
return {
  getBankCodeFun:getBankCode,
  accountSearch: '',
    }
}


methods: {
accounQuerySearchAsync(queryString, callback) {
  var list = [{}];
  let bankCode ;
//如果传输入框是空值，给后台传"all",表示查询全部
  if (queryString===""){
    bankCode = "all"
  }else {
    bankCode = queryString;
  }
//调用后台接口拿数据
  this.getBankCodeFun(bankCode,(res,err)=>{
    for(let i of res.content){
      i.value = i.bankName;  //将想要展示的数据作为value
    }
    list = res.content;
    callback(list);
  });
},
// 模糊查询下拉框 鼠标键盘选中点击触发
accountHandleSelect(item) {
  this.accountSearch = item.value;
  this.accountSearchCode = item.bankCode;
}
}

//调用后台
function getBankCode(paramObj,cb) {
  const apiUrl =`${apiWayBillDomain}/waybill/broker_report_capital_flow/getBankCode/${paramObj}`;
  HTTP.get(apiUrl, {}, (res, err) => {
    cb(res, err);
  });
}

后端代码（我的是根据银行名称模糊查询银行名称与英文缩写，选中银行，获取银行名称缩写进行下一步业务），根据自己业务修改请求参数，写自己业务实现类。

@GetMapping(value = "/waybill/broker_report_capital_flow/getBankCode/{bankName}")
public List<BankCode> getBankCode(@PathVariable("bankName") String bankName){

    return waybillBrokerReportCapitalFlowService.selectBankCode(bankName);
}