typescript 自定义自动填充功能

Posted 2021-05-20

  <div class="autoComplete" *ngIf="showAutocomplete">
          <ul *ngFor="let student of studentFromAutocomplete" (click)="onSelect(student)" (keydown.enter)="onSelect(student)" tabindex="0" role="listbox">
             <li role="option" aria-selected="false"> {{student.name + ' ' + student.studentId}}</li>
         </ul>
   </div>

.autoComplete {
    position: absolute;
    z-index: 1;
    top: 32px;
    left: 0;
    width: 65.5%;
    max-height: 200px;
    border: 1px solid #d7d7d7;
    overflow-y: auto;
    background: #fff;
}

	search(){
		let term = this.selectedStudent;
		if(term.length>2){
			this.studentFromAutocomplete = this.students.filter((item)=>{
				this.showAutocomplete = true
				return	item.name.indexOf(term)>=0 || item.studentId.indexOf(term)>=0;
				})
			
		}else if(term.length === 0){
			this.showAutocomplete = false;
		
		}
	
		}