HTML5 DataList控件只加載從我無法獲得在<strong>DataList控件</strong>顯示除了第一個所有建議元素過濾陣列

Question

第一自動完成建議。我已經檢查過，我的數組有超過1個元素。我不知道爲什麼其他元素沒有被提出。

這裏是我的代碼：

HTML

<input type="text" list="searchUsers" class="form-control with-danger-addon" placeholder="Search for..." [(ngModel)]="query" (keyup)=filter()> 
<datalist id="searchUsers" *ngIf="filteredList.length > 0"> 
    <option *ngFor="let item of filteredList" value={{item.FirstName}}></option> 
</datalist> 

打字稿

filter() { 
    if (this.query !== "") { 
     this.filteredList = this.users.filter(function (el) { 
     if(el["FirstName"].toLowerCase().search(this.query.toLowerCase()) > -1 || 
      el["LastName"].toLowerCase().search(this.query.toLowerCase()) > -1 || 
      el["Username"].toLowerCase().search(this.query.toLowerCase()) > -1) 
     { 
      return true; 
     } 
     }.bind(this)); 
    } else { 
     this.filteredList = []; 
    } 
    return false; 
    } 

    select(item) { 
    this.query = item; 
    this.filteredList = []; 
    } 

Array格式

this.users = [ 
    { 
    FirstName: 'Hannah', 
    LastName: 'Lie', 
    Username: 'abcd' 
    }, 
    { 
    FirstName: 'Hamid', 
    LastName: 'Kam', 
    Username: 'efgh' 
    } 

]; 

請幫助。

Answer 1

使用BehaviorSubject這裏是一個示例：

@Component({ 
    selector: 'my-datalist', 
    template: ` 
    <input type="text" list="searchUsers" 
    class="form-control with-danger-addon" 
    placeholder="Search for..." 
    (blur)="checkValidity()" 
    [(ngModel)]="query" (keyup)=filter()> 

    <datalist id="searchUsers" *ngIf="(filteredList | async)"> 
     <option 
     *ngFor="let item of filteredList | async" 
     value={{item.FirstName}}></option> 
    </datalist> 
    `, 
}) 
export class DataList { 
    data: string 
    query:string; 
    filteredList : Subject = new BehaviorSubject() 

    // fake data that could be changed coz i use Observable.of in filter to simulate 
    // async call 
    users = [ 
    { 
     FirstName: 'Hannah', 
     LastName: 'Lie', 
     Username: 'abcd' 
    }, 
    { 
     FirstName: 'Hamid', 
     LastName: 'Kam', 
     Username: 'efgh' 
    } 
    ]; 

    filter() { 
    if (this.query.length > 2 !== "") { 
     Observable.of(this.users).map(list => { 
     return list.filter(el => { 
      if(el["FirstName"].toLowerCase().search(this.query.toLowerCase()) > -1 || 
      el["LastName"].toLowerCase().search(this.query.toLowerCase()) > -1 || 
      el["Username"].toLowerCase().search(this.query.toLowerCase()) > -1) 
      { 
      return true; 
      } 
     }) 
     }).subscribe(item => { 
     this.filteredList.next(item) 
     }) 

     return 
    } 

    this.filteredList.next([]]) 
    } 

    checkValidity() { 
    console.info('checkValidity') 
    } 
} 

全碼here