diff --git a/static/js/category/brand.js b/static/js/category/brand.js index 52147ea..c08ce6d 100644 --- a/static/js/category/brand.js +++ b/static/js/category/brand.js @@ -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(); // }); + } diff --git a/static/sass/category/_brand.scss b/static/sass/category/_brand.scss index e82274f..0224f59 100644 --- a/static/sass/category/_brand.scss +++ b/static/sass/category/_brand.scss @@ -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 diff --git a/template/m.yohobuy.com/actions/category/brand/search.phtml b/template/m.yohobuy.com/actions/category/brand/search.phtml index 3bdff33..c9f7045 100644 --- a/template/m.yohobuy.com/actions/category/brand/search.phtml +++ b/template/m.yohobuy.com/actions/category/brand/search.phtml @@ -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>