要实现的页面效果：
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> {{'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
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
