根據功能製作與價值觀簡單的動態搜索欄

Question

長話短說，我有這個div裏面我app.component.html：

<div class="col-lg-6 search-div"> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search for..."> 
     <span class="input-group-btn"> 
     <button class="btn btn-default" type="button">Go!</button> 
     </span> 
      </div> 
</div> 

其中顯示：

而且我想它根據我在我的app.component.ts中的功能顯示可用值：

public getUsers() { 
     return this.restService.getUsers().subscribe(
       jsonElements => { 
       var users = jsonElements; 
      }, 
       error => this.errorMessage = <any>error); 
} 

我甚至可以預先存儲結果： users = this.getUsers(); 但是我怎麼過濾users？

有沒有簡單的方法來完成這個？

Answer 1

現在已經有一個HTML解決方案可以滿足你的需求，'datalist'標籤可以滿足你的需求。唯一的問題是它沒有很好的瀏覽器支持。你可以在https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist閱讀更多。

所以，你會使用它像

<input list="users"/></label> 
<datalist> 
    <option *ngFor='let user of users' value="user"> 
</datalist> 

Answer 2

你正在尋找一個自動完成。

你可以找到一個例子here與一個沉重的，但其他人也可以。