前端實現搜索歷史和清空歷史（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