`
gwj41
  • 浏览: 99714 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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);
    });
  }

 

 

 

 

分享到:
评论

相关推荐

    Angular中的Dom操作以及@ViewChild、Angular调用css3动画(侧边栏 actionSheet)示例代码.zip

    在Angular框架中,DOM操作是实现用户界面动态更新的关键部分,而@ViewChild和CSS3动画则是提高用户体验的重要技术手段。让我们深入探讨这些概念,并通过实际示例了解它们如何协同工作。 1. Angular中的DOM操作: ...

    Angular-RESTfulService, Angular 调用rest式服务的示例.zip

    Angular-RESTfulService, Angular 调用rest式服务的示例 Angular rest式服务示例这个项目简单地介绍了如何使用 Angular 来调用rest式服务。 只需克隆项目或者下载并提取. zip 即可开始。 Angular 概念使用app类和...

    jquery输入框提示自动完成功能.rar

    本教程将深入探讨如何利用jQuery实现输入框的提示自动完成功能,这种功能常见于搜索引擎、登录表单等,可以极大地提高用户体验。 首先,我们需要一个基本的HTML结构,包括一个input元素,作为用户输入的文本框。...

    angular inputNumber指令输入框只能输入数字的实现

    本文就详细介绍了如何通过Angular指令实现一个只能输入数字的inputNumber指令输入框。 首先,我们需要创建一个独立的模块,这个模块将作为公用指令的模块。具体步骤如下: 1. 使用Angular CLI命令生成一个模块,...

    spring集成redis实现聊天室功能

    综上所述,"spring集成redis实现聊天室功能"这个项目涵盖了Spring与Redis的集成、Redis的Pub/Sub机制、WebSocket实时通信以及前后端交互等多个技术点。通过这个项目,开发者可以提升对分布式系统设计、实时通信和...

    angular 限制输入框为整数还是保留两位小数指令

    angular 限制输入框为整数还是保留两位小数指令

    angular 实现的输入框数字千分位及保留几位小数点功能示例

    在Angular中实现输入框数字千分位及保留几位小数点功能示例中,涉及的知识点主要集中在AngularJS框架内如何通过指令来对输入框进行数值格式化的操作。具体来说,涉及到的知识点有: 1. AngularJS的指令(Directives...

    Angular.js输入框弹出城市联动地址选择代码.rar

    Angular.js输入框弹出城市联动地址选择代码,压缩包里面附带使用方法!

    Angular4实现动态添加删除表单输入框功能

    "Angular4实现动态添加删除表单输入框功能" Angular4实现动态添加删除表单输入框功能是指在Angular4框架下动态地添加或删除表单输入框,以满足不同场景下的需求。本文将详细介绍Angular4实现动态添加删除表单输入框...

    Angular6SPA集成企业微信Demo

    企业微信作为企业级通讯工具,提供了丰富的API接口供开发者调用,实现与企业微信的深度集成。在SPA中集成企业微信,可以实现一键登录、分享、消息推送等功能,提高用户体验并促进内部协作。 **3. 企业微信开发者...

    Angular+Bootstrap实现的一个管理系统

    Angular+Bootstrap实现的一个管理系统

    Angular动态添加、删除输入框并计算值实例代码

    在本文中,我们将深入探讨如何在Angular应用中实现动态添加、删除输入框以及计算这些输入框的总值。这个功能在创建可扩展的表单或需要用户输入多个类似数据项的场景中非常有用。我们将分析给出的实例代码,了解其...

    Angular 输入框实现自定义验证功能

    以下我们将深入探讨如何在Angular中实现输入框的自定义验证功能。 首先,我们需要了解AngularJS的内置验证机制。Angular提供了诸如`required`、`minlength`、`maxlength`、`pattern`等属性来对输入进行基本验证。...

    一个angular的消息提示组件

    这样,就可以在控制器、服务或者任何Angular组件中方便地调用消息提示功能。 总的来说,Angular的消息提示组件是一个强大的工具,它不仅提供了丰富的样式和配置选项,还能帮助开发者创建直观、一致的用户体验。无论...

    自动分位货币输入框

    标题“自动分位货币输入框”暗示我们讨论的是一个基于前端技术实现的用户界面组件,它专注于处理货币数据的输入,并能自动进行分位处理,确保数据格式的规范性。在网页应用中,这样的功能有助于提升用户体验,因为它...

    Angular4xTodoMVC实现

    **Angular 4.x TodoMVC 实现** Angular是一款由Google维护的开源JavaScript框架,用于构建单页应用程序(SPA)。在4.x版本中,Angular引入了许多改进和优化,使其成为现代Web开发的强大工具。TodoMVC是一个著名的...

    angular 封装全局按钮权限

    为了实现这样的功能,开发者可能需要在启动应用时初始化用户的权限信息,这可以通过监听Angular的路由事件或在服务初始化时调用后端接口完成。同时,为了保证性能,权限检查通常会在组件的`ngOnInit`生命周期钩子中...

Global site tag (gtag.js) - Google Analytics