历史错误修改

@@ -11,11 +11,19 @@ var $ = require('jquery'),
 
 
 var swiper,
 var swiper,
     $fixTitleBar,
     $fixTitleBar,
+    $brandText,
+    $brandHref,
     $brandList = $('.brand-list');
     $brandList = $('.brand-list');
 
 
 var searchH = $('.newbrand-search').outerHeight(),
 var searchH = $('.newbrand-search').outerHeight(),
     headerH = $('.yoho-header').outerHeight(),
     headerH = $('.yoho-header').outerHeight(),
     brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
     brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
+    minBrandListTop,
+    searchArray = [],
+    clearTextHammer,
+    removeHistory,
+    searchList,
+    yohoHistory,
     minBrandListTop;
     minBrandListTop;
 
 
 var brandsData,
 var brandsData,
@@ -109,6 +117,21 @@ function searchResult() {
 
 
     // 插入 dom，绑定事件
     // 插入 dom，绑定事件
     $('.search-result').html(html);
     $('.search-result').html(html);
+    $('.search-result .brand-list p').each(function (index) {
+        searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);
+        searchList.on('tap', function() {
+            $brandText = $('.search-result .brand-list p').eq(index).find('a').html();
+            $brandHref = $('.search-result .brand-list p').eq(index).find('a').attr('href');
+            if (localStorage.getItem('yohoHistory')) {
+                yohoHistory = localStorage.getItem('yohoHistory');
+                searchArray.push(yohoHistory);
+            }
+            if (searchArray.toString().split($brandText).length < 2) {
+                searchArray.push('{"searchName":"' + $brandText + '","searchHref":"' + $brandText + '"}');
+            }
+            localStorage.setItem('yohoHistory', searchArray);
+        });
+    });
 }
 }
 
 
 if ($('.brand-search-page').length) {
 if ($('.brand-search-page').length) {
@@ -116,6 +139,7 @@ if ($('.brand-search-page').length) {
     $keyword = $('#keyword');
     $keyword = $('#keyword');
 
 
     $keyword.on('input', function() {
     $keyword.on('input', function() {
+        $('.history').css('display', 'none');
         if ($keyword.val().length) {
         if ($keyword.val().length) {
             searchResult();
             searchResult();
             $(this).closest('.search-box').css('width', '11.25rem');
             $(this).closest('.search-box').css('width', '11.25rem');
@@ -137,4 +161,20 @@ if ($('.brand-search-page').length) {
     $('form.search-box').on('submit', function() {
     $('form.search-box').on('submit', function() {
         return false;
         return false;
     });
     });
+    if (localStorage && localStorage.getItem('yohoHistory')) {
+        yohoHistory = $.parseJSON('[' + localStorage.getItem('yohoHistory') + ']');
+        if (yohoHistory) {
+            $.each(yohoHistory, function(index, content) {
+                $('<a href="' + content.searchHref + '">' + content.searchName + '</a>').appendTo('.historyList');
+            });
+        }
+    } else {
+        $('.history').css('display', 'none');
+    }
+
+    removeHistory = new Hammer($('.removeHistory')[0]);
+    removeHistory.on('tap', function(e) {
+        $('.historyList').html(' ');
+        localStorage.clear();
+    });
 }
 }

@@ -37,7 +37,6 @@ $input.on('input', function() {
         $clear.removeClass('hide');
         $clear.removeClass('hide');
     }
     }
 });
 });
-
 cHammer = new Hammer($clear[0]);
 cHammer = new Hammer($clear[0]);
 cHammer.on('tap', function() {
 cHammer.on('tap', function() {
     $input.val('').trigger('input');
     $input.val('').trigger('input');

@@ -194,6 +194,51 @@
     
     
     .search-result {
     .search-result {
         padding-top: 176rem / $pxConvertRem;
         padding-top: 176rem / $pxConvertRem;
-    }    
+    }
+     .history{
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        position: absolute;
+        left: 0;
+        top: 176rem / $pxConvertRem;
+            > h6{
+            width: 100%;
+            height: 88rem / $pxConvertRem;
+            line-height: 88rem / $pxConvertRem;
+            color: #999;
+            text-indent: .6rem;
+            font-size: 36em / $pxConvertRem;
+            }
+        .historyList{
+            width: 100%;
+            height: auto;
+            overflow: hidden;
+            display: block;
+                > a{
+                width: auto;
+                height: 58rem / $pxConvertRem;
+                overflow: hidden;
+                line-height: 58rem / $pxConvertRem;
+                margin: 0 0 20rem / $pxConvertRem .6rem;
+                padding: 0 20rem / $pxConvertRem;
+                float: left;
+                background-color:#f8f8f8;
+                color: #444;
+                }
+        }
+        > span{
+            width: auto;
+            height: 68rem / $pxConvertRem;
+            overflow: hidden;
+            display: inline-block;
+             line-height: 68rem / $pxConvertRem;
+            border:1px solid #e6e6e6;
+            padding: 0 28rem / $pxConvertRem;
+            font-size: 48em / $pxConvertRem;
+            margin-left: .6rem;
+            color: #000;
+            }
+        }    
 
 
 }
 }

@@ -27,20 +27,20 @@
         .clear-input {
         .clear-input {
             position: absolute;
             position: absolute;
             top: 24rem / $pxConvertRem;
             top: 24rem / $pxConvertRem;
-            right: 100rem / $pxConvertRem;
+            right: 145rem / $pxConvertRem;
             font-size: 32rem / $pxConvertRem;
             font-size: 32rem / $pxConvertRem;
             color: #b2b2b2;
             color: #b2b2b2;
         }
         }
 
 
         .search {
         .search {
             position: absolute;
             position: absolute;
-            top: 16rem / $pxConvertRem;
+            top: 18rem / $pxConvertRem;
             left: 515rem / $pxConvertRem;
             left: 515rem / $pxConvertRem;
             border: none;
             border: none;
             background: transparent;
             background: transparent;
             color: #000;
             color: #000;
             font-size: 32rem / $pxConvertRem;
             font-size: 32rem / $pxConvertRem;
-            line-height: 64rem / $pxConvertRem;
+            line-height: 56rem / $pxConvertRem;
         }
         }
     }
     }
 
 

@@ -10,6 +10,11 @@
             </div>
             </div>
         </form>
         </form>
     </div>
     </div>
+    <div class="history">
+        <h6>历史纪录</h6>
+        <div class="historyList"></div>
+        <span class='removeHistory'>清空搜索历史</span>
+    </div>
     <div class="search-result">
     <div class="search-result">
     </div>
     </div>
 </div>
 </div>

@@ -6,7 +6,7 @@
                 <i class="search-icon iconfont">&#xe60f;</i>
                 <i class="search-icon iconfont">&#xe60f;</i>
                 <input type="text" placeholder="搜索商品" name="query">
                 <input type="text" placeholder="搜索商品" name="query">
                 <i class="clear-input iconfont hide">&#xe626;</i>
                 <i class="clear-input iconfont hide">&#xe626;</i>
-                <span id="search" class="search" type="submit">搜索</span>
+                <button id="search" class="search" type="submit">搜索</button>
             </form>
             </form>
         </div>
         </div>
         <div class="search-items">
         <div class="search-items">