前端实现搜索历史和清空历史（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

相关文章