效果图

需要后台配合，写一个查询，前端监听输入框每次的输入，同时把输入的值当作参数请求后台，后台把查询的结果返回来，然后显示在ul里，然后点击li获取li里的值，替换input的值

html

<div *ngIf="key?.config_info.columntype==9">
                    <label for="name">{{key?.config_info.columntitle}}</label>
                    <input style="width: 60%;" type="text" id="name" [name]="key?.config_info.columntitle"
                        [(ngModel)]="key?.config_info.result" [placeholder]="'请输入'+key?.config_info.columntitle"
                        (ngModelChange)="getChange(key?.config_info.result)">
                    <ul id="chooseSchool" *ngIf="schoolList">
                        <li *ngFor="let xuexiao of schoolList;index as xuexiaoINDEX" class="ellipsis" (click)="chooseSchool($event,idx,i)">{{xuexiao.name}}</li>
                    </ul>
                </div>

ts

// 输入框值改变请求符合的学校
  getChange(text){
    let params={
      name:text
    }
    if(text==""){
      this.schoolList=null;
      return;
    }
    this.getSchoolFun(params).then((res)=>{
      
      if(res['data'].length>10){
        res['data']=res['data'].slice(0,10)
      }
      else if(res['data'].length==0){
        res['data']=null
      }
      this.schoolList=res['data']
      console.log(res['data'],this.schoolList,1)
    })
  }
   // 获取学校列表请求
   getSchoolFun(params) {
    return (new Promise(resolve => {
      this.request.apiGet(this.api.getSchool, params).subscribe((result) => {
        resolve(result)
      })
    }))
  }
  // 点击学校并选择
  chooseSchool(e,idx,i){
    console.log(e.target.innerHTML,this.formInfo[idx])
    this.formInfo[idx]["list"][0][i].config_info.result=e.target.innerHTML
    this.schoolList=null
  }