Angular+Ionic实现搜索的历史记录功能(浏览器记录)

标签: angular  ionic4  需求

Angular+Ionic实现搜索的历史记录功能(浏览器记录)

1,html中

<!--搜索框内容 -->

<div class="header-search-input">
        <input type="text" id="research" placeholder="搜索商品" [(ngModel)]="inputTypes"
          (keyup)='getTypes($event)' (click)="onTauch()">
        <img class="shop-search-find" src="../../../assets/icon/search-icon/search.png"> </div>

<!--   历史记录内容 -->

<div class="shop-types-nocontent" *ngIf="!isShowContent">
<ion-list class="history-header">
        <ion-text class="history-log">
          历史记录
        </ion-text>
        <ion-text class="history-null">
        </ion-text>
        <ion-text class="history-delete" (click)="deleteAll()">
          <ion-icon name="trash-outline" class="icon-delete-gray"></ion-icon>
        </ion-text>
  </ion-list>
   <ion-list  class="history-content">
     <ion-text class="history-cell"  *ngFor="let item of historyItems">
         <span  (click)="checkedHisItem(item)">{{item}}</span> 
     </ion-text> 
  </ion-list>
</div>

<!-- 主界面内容 -->

 <div *ngIf="isShowContent" class="shop-types-content" > 
 主界面内容
 </div>


,2,ts中

//保存输入内容到localStorage

getTypes(e) {
    //实现防抖,设置定时器
    let timer = null; 
    timer && clearInterval(timer)
    timer = setTimeout(() => {
      console.log(this.inputTypes);
    }, 500);
    //监听事件
    let keycode = window.event ? e.keyCode : e.which;
    if (keycode == 13) {
       if (this.inputTypes.length > 0) {
           this.isShowContent=!this.isShowContent;
         this.inputValue = this.inputTypes.slice(0, 30);
         this.historyItems.push(this.inputValue) //存入数组
        let historyArr=Array.from(new Set(this.historyItems));//去掉重复
         console.log(historyArr+"去掉重复")
         let historyList=historyArr.join(",");   转为字符串  
         localStorage.setItem('historyItems', JSON.stringify(historyList)); //对象转换为字符串保存到localStorage
         let reSearchItems = localStorage.getItem('historyItems');
         //跳转页面
         this.router.navigate(['/product-reclassify'])
         console.log(reSearchItems+"reSearchItem");
       }
    }
   if (keycode == 27) {//esc键
          console.log("请重新输入")
   }
  }


//显示历史记录
onTauch(){
 this.isShowContent=!this.isShowContent;
}
//选中历史记录搜索
checkedHisItem(item) {
    this.inputValue = item;
    this.router.navigate(['/product-reclassify'])
}
//删除历史记录
deleteAll() {
  this.historyItems.forEach(item => {
      this.historyItems.splice(item); 
});
 this.getClassList();
}

3.实现功能效果

在这里插入图片描述

3.实现思路

使用localStorage保存输入值,通过*ngIf实现显示,遍历历史记录实现点击搜索。

版权声明:本文为weixin_44794123原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44794123/article/details/108196031

智能推荐

Intellij IDEA 搭建Spring Boot项目(一)

Intellij IDEA 搭建Spring Boot项目 标签(空格分隔): SpringBoot JAVA后台 第一步 选择File –> New –> Project –>Spring Initialer –> 点击Next  第二步 自己修改 Group 和 Artif...

CentOS学习之路1-wget下载安装配置

参考1: https://blog.csdn.net/zhaoyanjun6/article/details/79108129 参考2: http://www.souvc.com/?p=1569 CentOS学习之路1-wget下载安装配置 1.wget的安装与基本使用 安装wget yum 安装软件 默认安装保存在/var/cache/yum ,用于所有用户使用。 帮助命令 基本用法 例子:下载...

深入浅出Spring的IOC容器,对Spring的IOC容器源码进行深入理解

文章目录 DispatcherServlet整体继承图 入口:DispatcherServlet.init() HttpServletBean.init() FrameworkServlet.initServletBean() 首先大家,去看Spring的源码入口,第一个就是DispatcherServlet DispatcherServlet整体继承图 入口:DispatcherServlet....

laravel框架的课堂知识点概总

1. MVC 1.1 概念理解 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑 MVC 是一种使用 MVC(Model View Controller ...

Unity人物角色动画系统学习总结

使用动画系统控制人物行走、转向、翻墙、滑行、拾取木头 混合树用来混合多个动画 MatchTarget用来匹配翻墙贴合墙上的某一点,人物以此为支点翻墙跳跃 IK动画类似于MatchTarget,控制两只手上的两个点来指定手的旋转和位置,使得拾取木头时更逼真 创建AnimatorController: 首先创建一个混合树,然后双击 可以看到该混合树有五种状态机,分别是Idle、WalkForward、...

猜你喜欢

Composer 安装 ThinkPHP6 问题

Composer 安装 ThinkPHP6 问题 先说说问题 一.运行环境要求 二.配置 参考: ThinkPHP6.0完全开发手册 先说说问题 执行ThinkPHP6的安装命令 遇到问题汇总如下: 看提示是要更新版本,执行命令更新。 更新之后,再次安装ThinkPHP,之后遇到如下问题。 尝试了很多方法,依然不能解决。其中包括使用https://packagist.phpcomposer.com...

Spring Boot 整合JDBC

今天主要讲解一下SpringBoot如何整合JDBC,没啥理论好说的,直接上代码,看项目整体结构 看一下对应的pom.xml 定义User.java 定义数据源配置,这里使用druid,所以需要写一个配置类 上面指定druid的属性配置,和用户登录的账号信息以及对应的过滤规则: 下面定义数据访问接口和对应的实现: 数据访问层很简单,直接注入JdbcTemplate模板即可,下面再看对应的servi...

html鼠标悬停显示样式

1.显示小手:     在style中添加cursor:pointer 实现鼠标悬停变成小手样式     实例:         其他参数: cursor语法: cursor : auto | crosshair | default | hand | move | help | wait | tex...

Yupoo(又拍网)的系统架构

Yupoo!(又拍网) 是目前国内最大的图片服务提供商,整个网站构建于大量的开源软件之上。以下为其使用到的开源软件信息: 操作系统:CentOS、MacOSX、Ubuntu 服务器:Apache、Nginx、Squid 数据库:MySQLmochiweb、MySQLdb 服务器监控:Cacti、Nagios、 开发语言:PHP、Python、Erlang、Java、Lua 分布式计算:Hadoop...

创建一个Servlet项目流程(入门)

版本 IDEA 2020.2 JDK1.8 apache-tomcat-9.0.36 项目流程 一、IDEA中新建JaveEE项目 项目起名,选择项目存放地址,点击finish创建成功 进入项目后,右键选择项目,选择add Framework Support 选择Web Application,点击OK 此时项目文件夹 在WEB-INF下创建两个目录classes和lib 按ctrl+alt+sh...