9、构建动态搜索功能与测试实践

构建动态搜索功能与测试实践

1. 转换搜索功能为即时搜索

1.1 初步转换到 Angular

重新加载页面，输入搜索词并点击“查找客户”，能看到搜索结果返回。现在整个搜索功能已基于 Angular 实现，功能与之前相同，但底层技术发生了变化。将搜索功能转换为使用 Angular 只是实现让搜索功能更好服务用户这一目标的一步。在转换过程中保持功能不变，能让我们专注于基于 Angular 的特性。

1.2 实现即时搜索（Typeahead）

当前，当用户修改文本字段内容时，Angular 会更新 CustomerSearchComponent 类中 keywords 的值。我们可以利用 Angular 的 ngModelChange 属性来实现即时搜索。

原本的代码如下：

<input bindon-ngModel="keywords" ... >

等价于：

<input bind-ngModel="keywords"
on-ngModelChange="keywords=$event" ... >

为了实现即时搜索，我们将 $event 发送到搜索函数：

<input type="t