如果术语为空，则禁用实时搜索 - Angular 2

Question

我使用 this 教程创建了实时搜索，但如果我在查询中发送空白搜索，我的终点会重定向。如果我的 keyup 是空白的，我该如何禁用我的功能？

在我的 html 中输入：

<input(keyup)="searchTerm$.next($event.target.value)">

组件：

this.searchService.search(this.searchTerm$)
.subscribe(results => {
  this.results = results
});

搜索服务：

constructor(private http: Http) { }

search(terms: Observable<string>) {
return terms.debounceTime(400)
  .distinctUntilChanged()
  .switchMap(term => this.searchEntries(term));
}

searchEntries(term) {
return this.http
    .get(this.baseUrl + this.queryUrl + term)
    .map(res => res.json());
}

Answer 1

您可以只向 Obserable 添加一个 filter 运算符。

return terms.debounceTime(400)
  .distinctUntilChanged()
  .filter(term => this.term)
  .switchMap(term => this.searchEntries(term));
}

由于白色 space 可能是一个问题，您可以使用 this.term && this.term.trim().length > 0 这样的表达式使过滤器更具体一些。实施由您决定。

Answer 2

return terms.debounceTime(400)
  .distinctUntilChanged()
  .switchMap(term => this.searchEntries(term));
}

您可以勾选要禁用的案例。所以你会这样改变它：

return terms.debounceTime(400)
  .distinctUntilChanged()
  .switchMap(term => {
      if(term){
         this.searchEntries(term);
      }
  });
}

可能有更优雅的解决方案，但应该可行。

Answer 3

你可以直接短路：

<input (keyup)="$event.target.value && searchTerm$.next($event.target.value)">

"If there is a value, then run the search"

如果术语为空，则禁用实时搜索 - Angular 2

Disable real time search if term is blank - Angular 2

javascript

onkeyup

angularjs

debounce