根据功能使用简单的动态搜索栏

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

您正在寻找自动填充功能。

您可以找到一个带有plunker的示例here，但其他人也可以使用。