要实现的页面效果:

 

  1.显示历史搜索,

  2.最近搜索的排在最前,

  2.最多显示8条历史

  4.清空历史记录

思路:

  1.首先显示历史记录需要一个数组searchItems,通过ng-repeat显示每一个<li>

 <label class="item item-input input-search">
<input ng-focus="showSearch(i)" ng-blur="hideSearch(i)" type="text" ng-model="searchName" placeholder="">
<button class="button button-small button-search-jd" on-tap="search()">{{'jifen.search' | i18next}}</button>
</label>
<div ng-show="searchHistory" class="search-history-wrap">
<p><i class="icon ion-ios-clock-outline"></i>&nbsp;{{'jifen.recentSearch' | i18next}}</p>
<ul class="search-history-list">
<li ng-repeat="sItem in searchItems" on-tap="historyName($event)">{{sItem}}</li>
<!--<li>杯子</li>
<li>电脑</li>
<li>笔记本</li>
<li>金龙鱼食用油</li>
<li>杯子</li>
<li>电脑</li>
<li>笔记本</li>
<li>金龙鱼食用油</li>-->
</ul>
<p class="text-right">
<button class="button button-outline button-light del-search" on-tap="delSearch()">{{'jifen.delSearch' | i18next}}</button>
</p>
</div>

    注:关于搜索实现,见:angularjs+ionic的app端分页和条件

  2.js实现

//商城列表-搜索历史弹框
$scope.searchHistory=false;
$scope.searchItems = [];//初始化历史列表数组
$scope.showSearch = function(i) { $scope.searchHistory=true; };
$scope.hideSearch = function(i) { $scope.searchHistory=false; };

  每次搜索都会想数组$scope.searchItems中添加搜索的记录searchName,并且做判断,1.最多8条记录;2.最近搜索的添加在数组头部;3如果搜索历史中已经有,则不添加,但替换到最前位置。

        //搜索事件
$scope.search = function() {
if($scope.searchName != undefined && $scope.searchName != "" && $scope.searchName != null) {
sName = $scope.searchName;
currentPage = 0;
// intData = [];
intData.splice(0,intData.length);//清空数组
$scope.loadMore(); //搜索记录
if($scope.searchItems.length < 8 && $scope.searchItems.indexOf(sName) < 0){//$scope.searchItems.indexOf(sName),类似string的方法,获取索引坐标
$scope.searchItems.unshift(sName);//向数组的开头添加一个或更多元素,并返回新的长度
}else if($scope.searchItems.length >= 8 && $scope.searchItems.indexOf(sName) < 0){
$scope.searchItems.pop();//删除并返回数组的最后一个元素
$scope.searchItems.unshift(sName);
}else if($scope.searchItems.indexOf(sName) >= 0){
$scope.searchItems.splice($scope.searchItems.indexOf(sName),1);
$scope.searchItems.unshift(sName);
}
}
}

  点击列表中的某一个,会跳转搜索

//历史搜索
$scope.historyName = function(event) {
$scope.searchName = event.target.innerHTML;
$scope.search();
}

    注:绑定在 li 上的方法:on-tap="historyName($event)",接受 $event 参数,你可以利用它获取当前被点击的 li

  清空搜索记录:

//清空搜索记录
$scope.delSearch = function() {
$scope.searchItems.splice(0,$scope.searchItems.length);//清空数组
}

参考:

  JS数组的方法api:http://www.w3school.com.cn/jsref/jsref_obj_array.asp

  AngularJS如何添加的DOM元素且能绑定事件:https://segmentfault.com/q/1010000002957477

  splice()方法:http://www.jb51.net/article/33306.htm

前端实现搜索历史和清空历史(angularjs+ionic)的更多相关文章

  1. Git清空历史,清空历史删除的文件,降低.git 文件大小

    执行以下步骤之前 请做好源码备份 本操作用来清理github上面的历史删除文件,减少库的体积. 第一步骤 下载JDK环境和JAR包 https://rtyley.github.io/bfg-repo- ...

  2. js实现前端的搜索历史记录

    最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图, ...

  3. Cordova+Angularjs+Ionic 混合开发入门讲解

    作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...

  4. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  5. angularJs ionic phoneGap 分享

    由于坑较多 就如“天下难事,必作于易吧” 最近有机会接触到了git  node angularJs ionic phoneGap 很开森也很痛苦 分享如下 推荐的几个博客地址: ionic开发插件之n ...

  6. AngularJS+Ionic开发-1.搭建开发环境

    临时项目需要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间做过几个页面,目前别人已经无法联系了,只能我自己上了. 上次做完项目后,想抽时间好好巩固一下这方面的知识面来 ...

  7. linux 清空历史命令

    系统版本:CentOS 6 history -c 命令可以清空当前窗口的历史输出命令. 要彻底删除历史命令可以有如下几种方式: 在当前用户的-目录下执行: 方式1: echo > .bash_h ...

  8. android AutoCompleteTextView 实现手机号格式化,附带清空历史的操作

    有个小伙伴遇到了这样一个问题,就是AutoCompleteTextView实现自动填充的功能.同时要具备手机格式化的功能.下拉列表最后一行是有个清除历史的功能.可是点击“清除历史”却把文字要设置进去A ...

  9. 前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

随机推荐

  1. 新概念英语(1-99)Ow!

    Lesson 99 Owl! 啊哟! Listen to the tape then answer this question. Must Andy go to see the doctor?听录音, ...

  2. Docker学习笔记 - Docker容器内部署redis

    Docker学习笔记(2-4)Docker应用实验-redist server 和client的安装使用 一.获取redis容器(含客户端和服务端) 二.创建服务端容器 1.在终端A中运行redis- ...

  3. cv2.cornerHarris()详解 python+OpenCV 中的 Harris 角点检测

    参考文献----------OpenCV-Python-Toturial-中文版.pdf 参考博客----------http://www.bubuko.com/infodetail-2498014. ...

  4. 模板引擎Jade详解

    有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与 ...

  5. Object.defineProperties()和Object.defineProperty()方法

    Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...

  6. Python 爬虫基础知识

    requests Python标准库中提供了:urllib.urllib2.httplib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作, ...

  7. 使用Vertx重构系统小结

    背景 前几个月,使用Vertx重构了公司的一个子系统,该系统负责公司核心数据subscriber的采集.处理.存储和搜索.这里介绍下重构该系统时的一些关键点. 架构 重构前系统部署图: 重构前系统主要 ...

  8. Java网络编程基础(Netty预备知识)

    今天在家休息,闲来无事,写篇博客,陶冶下情操~~~ =================我是分割线================ 最近在重新学习Java网络编程基础,以便后续进行Netty的学习. 整 ...

  9. [HNOI 2017]礼物

    Description 我的室友最近喜欢上了一个可爱的小女生.马上就要到她的生日了,他决定买一对情侣手 环,一个留给自己,一个送给她.每个手环上各有 n 个装饰物,并且每个装饰物都有一定的亮度.但是在 ...

  10. Codefroces 850C Arpa and a game with Mojtaba

    Description两个人Van♂游戏.给出$n$个正整数$ai$两人轮流操作,每次选出一个素数$p$和一个幂数$k$,选择的前提为该$n$个数中有$p^{k}$的倍数.接着将所有的$p^{k}$的 ...