前端实现搜索历史和清空历史(angularjs+ionic)

时间:2021-01-17 07:03:06

要实现的页面效果:

 前端实现搜索历史和清空历史(angularjs+ionic)

  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