tip： 只要进行数据绑定，一定要先检查是否在app_module.ts中进行过formsModule的数据引入，如果没有进行引入，在数据绑定的时候会出现报错

例一：京东搜索，历史记录

html:　

<div>
<input type="text" [(ngModel)]="keyword">
<button (click)="dosearch()">搜索</button>
<ul>
<li *ngFor="let item of historyList ; let key= index">{{item}}
<button (click)="deletehistory()">x</button>
</li>
</ul>
</div>

ts中：

public keyword:string="";
public historyList:any[]=[];

dosearch(){
console.log(this.keyword);
console.log(this.historyList.indexOf(this.keyword));
if(this.historyList.indexOf(this.keyword)==-1){
if(this.keyword !=""){
this.historyList.push(this.keyword);
this.keyword="";
}else{
console.log("请输入您要搜索的物品");
}
}else{
console.log("您搜索过此物品");
}
}
deletehistory(key){
this.historyList.splice(key,1);
}
解析：
console.log(this.keyword);获取输入框中的值。
this.historyList.indexOf(this.keyword)==-1 历史列表中的值是否等于-1
if(this.historyList.indexOf(this.keyword)==-1){ 判断历史列表中的值是否为-1
如果是-1则，
if(this.keyword !=""){
·　　　　　　在判断输入框中的值是否为空，不为空，将输入框中的值赋值给历史列表　　　　　　
this.historyList.push(this.keyword);
this.keyword="";

如果为空，则进行提示
console.log("请输入您要搜索的物品");
如果不为-1,给出提示
console.log("您搜索过此物品");

删除数据使用splice()属性；

例二：搜索过的记录可以互相转换（备忘事件和过期事件）
html:中
<div>
<input type="text" [(ngModel)]="keyword" (keyup)="keyUp($event)">
<h3>待办事项</h3>
<ul>
<li *ngFor="let item of todolist; let key=index" [hidden]="item.status==1">
<input type="checkbox" [(ngModel)]="item.status">{{item.title}}
<button type="button" (click)="deletedata()">x</button>
</li>
</ul>
<h3>已办事项</h3>
<ul>
<li *ngFor="let item of todolist; let key=index" [hidden]="item.status==0">
<input type="checkbox" [(ngModel)]="item.status">{{item.title}}
<button type="button" (click)="deletedata()">x</button>
</li>
</ul>
</div>

ts:中
public keyword:string="";

public todolist:any[]=[];

keyUp(e){
if(e.keyCode == 13){
console.log(this.keyword);
// 先去重
if(!this.todoListHasKeyWord(this.todolist,this.keyword)){
this.todolist.push({title:this.keyword,status:0});
this.keyword="";
}else{
console.log("您已经搜索过此物品");
}
}
}
// 封装去重写法
todoListHasKeyWord(todolist:any,keyword:any){
if(!keyword) return false;
for(var i=0;i<todolist.length;i++){
if(todolist[i].title == keyword){
return true;
}
}
return false;
}
deletedata(key){
this.todolist.splice(key,1);
}

解析：
传入todolist（历史记录列表），keyword（输入框中的值）这两个值进入自定义的函数中，在接下来进行判断，因为todolist的title就是输入框中的值也就是验证
todolist.title ==keyword;在todolist(历史列表中)进行逐个排查 for( var i= 0;i<todolist.length;i++){todolist[i].title==keyword}如果为真，则就
返回true（真），if(!keyword) return false;判断里面是否存在和keyword相同的值，不存在返回false;

转载于:https://www.cnblogs.com/rockyjs/p/11271130.html

列出搜索过的数据(类似京东顶部搜索框)相关推荐

  1. android 仿搜索动画,Android仿京东顶部搜索框滑动伸缩动画效果

    最近使用京东发现,京东顶部的搜索框有一个新的伸缩效果,根据用户的手势滑动,伸缩搜索框.觉得效果还不错,就看了下其他的应用有没有这种伸缩的效果,发现安居客也使用了类似的一种效果,然后就想着实现这样的一种 ...

  2. 接入科大讯飞语音听写，增加语音动画，类似京东语音搜索功能

    前言:小白第一次接入科大讯飞语音听写,接入还是比较简单的,先看效果图无UI界面 Demo地址拿去 效果图有两部分,一是接入科大讯飞语音听写功能,可以实现将语音转换成文字. 二是看到的语音音量动画效果, ...

  3. elasticsearch实现类似京东的商品搜索效果（elasticsearch动态聚合）

    用到京东的对其搜索应该不会陌生,其搜索也是使用elasticsearch完成的,下图为一个搜索效果图: 搜索筛选条件会根据查询返回的结果动态变化,要实现这个功能就要用到elasticsearch的聚合 ...

  4. 深入理解空间搜索算法 ——数百万数据中的瞬时搜索

    转自 干货|深入理解空间搜索算法 --数百万数据中的瞬时搜索 全球人工智能:专注为AI开发者提供全球最新AI技术动态和社群交流.用户来源包括:北大.清华.中科院.复旦.麻省理工.卡内基梅隆.斯坦福.哈 ...

  5. PMCAFF微分享 | 京东首席搜索专家，告诉你电商搜索你不得不知道的秘密

    本期主题 | 京东搜索下拉框产品个性化探索 分享时间 | 7月9日(周五)21:00 分享地点 | PMcaff B端产品经理群 进群方式 | 请加管理员微信:kit alt [本期嘉宾] 商倩兰 京 ...

  6. 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)

    首先看一下实现效果: 现在JSON用于数据的封装和管理越来越流行,一直想着通过JSON实现很多的小工具,比如多条件筛选.表格定制化.数据验证.tree树等等,最近没事就用JSON和JQuery实现了类 ...

  7. 京东到家搜索系统架构演进

    目录 一. 前言 二. 搜索系统架构演进 2.1 到家搜索系统1.0 基于LBS搜索召回场景 建立"可用"的搜索系统 小结 2.2 到家搜索系统2.0 重构召回 排序模型小试牛刀 ...

  8. Elasticsearch：使用 Elasticsearch 在键入时实现类似 Linkedin 的搜索

    原文:Implementing a Linkedin like search as you type with Elasticsearch 在大多数社交网络中搜索时,你的直接联系人的排名将高于其他用户 ...

  9. 微信小程序顶部搜索框 （带源码 建议收藏）

    这是一个最简单的顶部搜索框  代码如下 wxml <view><view><view class="weui-search-bar"><v ...

最新文章

  1. Go 学习笔记（82）— Go 第三方库之 viper（解析配置文件、热更新配置文件）
  2. Oracle10g.CentOS6安装
  3. 设计模式-行为-职责链
  4. 2015 提高组 跳石头--二分答案
  5. edHat linux光盘引导,[原]个性化Linux发行版光盘之补充——XZ（LZMA算法）
  6. [数据恢复答疑]用partition manager导致资料丢失怎么办？
  7. 如何在Ruby中编写switch语句
  8. golang windows下杀进程
  9. ubuntu20.04安装MySQL、卸载MySQL命令
  10. Javascript禁止网页复制粘贴效果，或者复制时自动添加来源信息
  11. 论Spring开发框架
  12. 电脑小技巧系列——快捷打开程序应用
  13. 提高工作效率的5款APP推荐 ，可能第一个你就没用过
  14. java求抽象类shape_java 抽象类 Shape
  15. 2017腾讯暑期实习生从笔试到面试总结（附带华为、阿里面试经历）
  16. 【Altium Designer 19使用教程】Part1 工程及原理图的创建
  17. 复习C++期末考试题目
  18. iGame最强Z370VulcanX主板：为第八代酷睿蓄势待发
  19. 天地图实现标注用户当前坐标位置
  20. SDKMAN!使用指南

热门文章

  1. loadrunner两个报错Error -27492、Error -27778 互斥的问题
  2. Java7和8在虚拟机上的差异：Perm Generation vs. Metaspace
  3. 列出spring security的所有SecurityFilterChain
  4. pythonkeywordis与 ==的差别
  5. 在CentOS下搭建自己的Git服务器
  6. 双向链表中基本函数的实现
  7. linux超级终端minicom的使用方法
  8. 【简报】超棒的免费Web字体服务：Adobe Edge Web字体
  9. [研究笔记]Lambda表达式学习笔记
  10. Java 启动参数大全