使用input加ul实现模糊输入（后台返回搜索结果，基于angularts）

效果图

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

html

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


ts

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