Angular 2在数组中搜索并选择一个项目

时间:2016-11-22 15:21:50

标签: angular angular2-template angular2-forms

在我的应用中,我从在线网络服务中获取用户列表,并将其存储到fetchedUsers数组中。我在Angular 2中使用模型驱动的表单。我有一个输入文本字段,它接受用户的输入。我有一个工作搜索管道,它从文本字段中获取输入并仅显示匹配的数据。我正在尝试实现与here相同的搜索功能。我试图通过一些角色2插件来获得这种行为,例如ng2-select,但没有运气。我不想要一个可以搜索的选择元素。我想要一个可以搜索和显示匹配数据的输入字段。

已经完成:

到目前为止,我可以搜索和显示匹配的数据。如果您输入例如a的内容,则可以在输入字段下方看到结果。

努力实现:

我想使用键盘向上和向下键导航结果,如果用户在项目上按Enter键,我希望将该项目添加到selectedUsers数组并在下面显示selectedUsers的内容

请帮助如何实现此行为?为了便于理解,您可以访问上述链接。

我有一个关于我的应用here的工作演示,可以在github上查看代码

1 个答案:

答案 0 :(得分:0)

使用(keyup.enter)调用输入函数并获取所选值。

<option #val (keyup.enter)="myFunction(val)"></option>