在 AngularJS 中实现一个搜索组件，该组件在用户按下 Enter 键时调用该函数（keyCode = 13），然后根据用户输入执行一些相关任务。这可以使用keyup事件轻松实现。
这里出于样式目的，使用了 bootstrap 和 font awesome。
我们需要一个基本的输入标签，它将有一个 keyup 事件，它调用一个onSubmit($event)函数并将事件作为参数传递。 $event为我们提供了不同类型的属性，但我们将借助keyCode来告诉我们用户按下了哪个键。我们使用的键码检查用户是否按下其代码是13，一旦按下回车键，你想，你可以执行的任务，例如从列表中搜索或通过搜素到另一个组件Enter键。为简单起见，我们创建了一个小数组，用于检查数组内的搜索元素并输出结果。
例子：
app.component.html
Programming Languages
Searching your results for
{{prevText}}
{{res_cnt}} Search Result Found
{{lang}},
app.component.css
.searchBox{
margin: 20px 0;
}
input{
width: 100%;
padding: 10px;
text-align: center;
}app.component.ts
import { Component } from '@angular/core';
import { AbstractControl, FormBuilder,
FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
template: './app.component.html',
styles: ['./app.component.css']
})
export class AppComponent {
searchValue: string = null;
condition: boolean = null;
prevText: string = '';
list_lang = ['java', 'c++', 'python', 'c', 'javascript'];
res_list = [];
res_cnt: number = 0;
onSubmit($event){
if($event.keyCode === 13){
this.condition = true;
this.prevText = this.searchValue;
this.res_cnt = 0;
this.res_list = [];
setTimeout(() => {
this.condition = false;
for(let i=0; i应用组件.css
.searchBox{
margin: 20px 0;
}
input{
width: 100%;
padding: 10px;
text-align: center;
}
app.component.ts
import { Component } from '@angular/core';
import { AbstractControl, FormBuilder,
FormGroup } from '@angular/forms';
@Component({
selector: 'app-root',
template: './app.component.html',
styles: ['./app.component.css']
})
export class AppComponent {
searchValue: string = null;
condition: boolean = null;
prevText: string = '';
list_lang = ['java', 'c++', 'python', 'c', 'javascript'];
res_list = [];
res_cnt: number = 0;
onSubmit($event){
if($event.keyCode === 13){
this.condition = true;
this.prevText = this.searchValue;
this.res_cnt = 0;
this.res_list = [];
setTimeout(() => {
this.condition = false;
for(let i=0; i输出
