upadte

@@ -19,7 +19,9 @@ var searchH = $('.newbrand-search').outerHeight(),
 var brandsData,
     $keyword,
     searchBtnHammer,
-    clearTextHammer;
+    clearTextHammer,
+    removeHistory,
+    searchList;
 
 swiper = new Swiper('.swiper-container', {
     lazyLoading: true,
@@ -97,14 +99,16 @@ function searchResult() {
         brandHtml.push(k);
         brandHtml.push('</h2></div>');
         $.each(v, function(i, brand) {
-            brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
+
+            // brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
+            brandHtml.push('<p><span>' + brand.name);
             if (brand.isNew) {
                 brandHtml.push('<i class="icon-hot">Hot</i>');
             }
             if (brand.isHot) {
                 brandHtml.push('<i class="icon-new">New</i>');
             }
-            brandHtml.push('</a></p>');
+            brandHtml.push('</span></p>');
         });
         brandHtml.push('</div>');
         html += brandHtml.join('');
@@ -128,6 +132,19 @@ function searchResult() {
     if (Object.keys(result).length > 0) {
         rightBarBindClick();
     }
+    console.log($('.search-result .brand-list p').length);
+    $('.search-result .brand-list p').each(function (index) {
+        // $('.search-result .brand-list').eq(index).find('p span').click(function () {
+        //     console.log(index);
+        // })
+
+        searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);
+        searchList.on('tap',function(){
+            // var $el = $(e.target);
+            // console.log($el.closest('sapn')).html();
+            console.log($('.search-result .brand-list p').eq(index).find('span').html());
+        });
+    });
 }
 
 if ($('.brand-search-page').length) {
@@ -135,6 +152,7 @@ if ($('.brand-search-page').length) {
     $keyword = $('#keyword');
 
     $keyword.on('input', function() {
+        $('.history').css('display', 'none');
         if ($keyword.val().length) {
             searchResult();
             $(this).closest('.search-box').css('width', '11.25rem');
@@ -161,6 +179,23 @@ if ($('.brand-search-page').length) {
     $('form.search-box').on('submit', function() {
         return false;
     });
+    if (localStorage) {
+        var yohoHistory = localStorage.getItem("yohoHistory");
+
+        if (yohoHistory) {
+            for (var i = 1; i < yohoHistory.split(" ").length - 1; i++) {
+                $("<a href='#'>" + yohoHistory.split(" ")[i] + "</a>").appendTo(".historyList");
+            }
+        }
+
+    };
+
+    removeHistory = new Hammer($('.removeHistory')[0]);
+    removeHistory.on('tap', function(e) {
+        $(".historyList").html(" ");
+        localStorage.clear();
+    });
+
 
     // clearHistoryHammer = new Hammer($('#clear-text')[0]);
     // clearHistoryHammer.on('tap', function() {
@@ -173,4 +208,5 @@ if ($('.brand-search-page').length) {
     //     $('#history-keyword').remove();
     //     $(this).hide();
     // });
+
 }

@@ -164,4 +164,49 @@
     .search-result {
         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;
+     }
 }
\ No newline at end of file

@@ -10,10 +10,16 @@
             </div>
         </form>
     </div>
-
+    <div class="history">
+        <h6>历史纪录</h6>
+        <div class="historyList">
+        </div>
+        <span class='removeHistory'>清空搜索历史</span>
+    </div>
     <div class="search-result">
     </div>
 </div>
+
 <script id="brands-data" type="text/tmpl">
     {{{brandList}}}
 </script>