Angular调用redis实现输入框自动提示

其实用Elasticsearch比较完美,redis的版本只能从开头的字符匹配,但是ELK还不会,准备学学,先用redis实现下,redis返回的提示信息的list,就省略不写了。

页面代码片段

<div>
		<label for="autocomplete">Auto complete</label>
		<input id="autocomplete" type="text" (keyup)="onKey($event)" />
	</div>
timeout;
  onKey(event: any) {
    // 取消上一次的timeout设置
    clearTimeout(this.timeout);
    // 延迟3秒
    this.timeout = setTimeout(() => this.getSuggestion(event), 3000);
  }

  getSuggestion(event: any) {
    const token = localStorage.getItem('token');
    const word = event.target.value;
    if (!word) {
      return;
    }
    const url = 'http://localhost:8764/api/v1/user/redis/project/autoSuggest/' + word;
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.set('Content-Type', 'application/json')
    // .set('Accept', 'application/json')
    .set('Authorization', 'Bearer ' + token)
    this.http.get(url, {headers: headers}).subscribe(data => {
      const additionalInfo = data['additionalInfo'];
      // console.log(additionalInfo)
      if (additionalInfo === null) {
        return;
      }
      const suggest = additionalInfo['suggest'];
      if (suggest) {
        console.log(suggest);
      }
    }, (error: HttpErrorResponse) => {
      console.log(error.error);
    });
  }

相关推荐