实现效果如图:用户输入查询字段,检测到用户不再输入之后,发送请求,得到后台返回的模糊匹配的所有选项:
(注意:用户keyup输入test时,如果监听keyup事件的话,相当于触发了4次,这里只在test全部输入之后,并且在一段时间内没有再次输入才会触发请求。
如果没有keyup时间都会触发请求的话,会影响响应效果。如果网络慢的话,还会造成上一个请求结果还没到,下一个请求已经触发,造成返回的结果出错。)
【关于autocomplete:】
在HTML属性中的autocomplete="on"表示自动完成;当用户输入时浏览器显示之前用户曾输入的选项;
这里的matAutocomplete是angular Material里的一个组件;使用matAutocomplete之前需有Input,
关于Autocomplete的详细情况可进入 Material的官网查看。
关于debounceTime,去抖动处理,防止重复发送请求;
this.targetForm.get('xxx').valueChanges.debounceTime(1000).distinctUntilChanged().subscribe(newValue => {//这里放1000毫秒之后的操作})