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

最新推荐文章于 2024-01-21 03:38:00 发布

最新推荐文章于 2024-01-21 03:38:00 发布 · 408 阅读

文章标签：

#javascript #数据库 #大数据 #ViewUI

Angular 同时被 3 个专栏收录

3 篇文章

订阅专栏

Javascript

3 篇文章

订阅专栏

Typescript

2 篇文章

订阅专栏

本文介绍了一种利用Redis实现输入框自动补全功能的方法。通过Angular和HTTP请求结合Redis后端服务，实现了延迟响应机制，确保用户体验的同时减轻服务器负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实用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);
    });
  }