下面是一个使用Angular的搜索表单示例,仅在找到元素时显示选项列表:
HTML代码:
- {{ option }}
组件代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-search-form',
templateUrl: './search-form.component.html',
styleUrls: ['./search-form.component.css']
})
export class SearchFormComponent {
options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
filteredOptions: string[] = [];
searchTerm = '';
showOptions = false;
filterOptions() {
this.filteredOptions = this.options.filter(option =>
option.toLowerCase().includes(this.searchTerm.toLowerCase())
);
this.showOptions = this.filteredOptions.length > 0;
}
}
在这个示例中,我们首先在搜索框中使用双向数据绑定来获取搜索词。然后,我们使用input事件来调用filterOptions()方法,在输入时过滤选项列表。filterOptions()方法使用Array的filter()函数来筛选与搜索词匹配的选项。最后,我们通过设置showOptions变量来控制选项列表是否显示。
请注意,这只是一个基本示例,您可以根据自己的需求进行调整和扩展。