Authored by uedxwg

upadte

@@ -19,7 +19,9 @@ var searchH = $('.newbrand-search').outerHeight(), @@ -19,7 +19,9 @@ var searchH = $('.newbrand-search').outerHeight(),
19 var brandsData, 19 var brandsData,
20 $keyword, 20 $keyword,
21 searchBtnHammer, 21 searchBtnHammer,
22 - clearTextHammer; 22 + clearTextHammer,
  23 + removeHistory,
  24 + searchList;
23 25
24 swiper = new Swiper('.swiper-container', { 26 swiper = new Swiper('.swiper-container', {
25 lazyLoading: true, 27 lazyLoading: true,
@@ -97,14 +99,16 @@ function searchResult() { @@ -97,14 +99,16 @@ function searchResult() {
97 brandHtml.push(k); 99 brandHtml.push(k);
98 brandHtml.push('</h2></div>'); 100 brandHtml.push('</h2></div>');
99 $.each(v, function(i, brand) { 101 $.each(v, function(i, brand) {
100 - brandHtml.push('<p><a href="' + brand.url + '">' + brand.name); 102 +
  103 + // brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
  104 + brandHtml.push('<p><span>' + brand.name);
101 if (brand.isNew) { 105 if (brand.isNew) {
102 brandHtml.push('<i class="icon-hot">Hot</i>'); 106 brandHtml.push('<i class="icon-hot">Hot</i>');
103 } 107 }
104 if (brand.isHot) { 108 if (brand.isHot) {
105 brandHtml.push('<i class="icon-new">New</i>'); 109 brandHtml.push('<i class="icon-new">New</i>');
106 } 110 }
107 - brandHtml.push('</a></p>'); 111 + brandHtml.push('</span></p>');
108 }); 112 });
109 brandHtml.push('</div>'); 113 brandHtml.push('</div>');
110 html += brandHtml.join(''); 114 html += brandHtml.join('');
@@ -128,6 +132,19 @@ function searchResult() { @@ -128,6 +132,19 @@ function searchResult() {
128 if (Object.keys(result).length > 0) { 132 if (Object.keys(result).length > 0) {
129 rightBarBindClick(); 133 rightBarBindClick();
130 } 134 }
  135 + console.log($('.search-result .brand-list p').length);
  136 + $('.search-result .brand-list p').each(function (index) {
  137 + // $('.search-result .brand-list').eq(index).find('p span').click(function () {
  138 + // console.log(index);
  139 + // })
  140 +
  141 + searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);
  142 + searchList.on('tap',function(){
  143 + // var $el = $(e.target);
  144 + // console.log($el.closest('sapn')).html();
  145 + console.log($('.search-result .brand-list p').eq(index).find('span').html());
  146 + });
  147 + });
131 } 148 }
132 149
133 if ($('.brand-search-page').length) { 150 if ($('.brand-search-page').length) {
@@ -135,6 +152,7 @@ if ($('.brand-search-page').length) { @@ -135,6 +152,7 @@ if ($('.brand-search-page').length) {
135 $keyword = $('#keyword'); 152 $keyword = $('#keyword');
136 153
137 $keyword.on('input', function() { 154 $keyword.on('input', function() {
  155 + $('.history').css('display', 'none');
138 if ($keyword.val().length) { 156 if ($keyword.val().length) {
139 searchResult(); 157 searchResult();
140 $(this).closest('.search-box').css('width', '11.25rem'); 158 $(this).closest('.search-box').css('width', '11.25rem');
@@ -161,6 +179,23 @@ if ($('.brand-search-page').length) { @@ -161,6 +179,23 @@ if ($('.brand-search-page').length) {
161 $('form.search-box').on('submit', function() { 179 $('form.search-box').on('submit', function() {
162 return false; 180 return false;
163 }); 181 });
  182 + if (localStorage) {
  183 + var yohoHistory = localStorage.getItem("yohoHistory");
  184 +
  185 + if (yohoHistory) {
  186 + for (var i = 1; i < yohoHistory.split(" ").length - 1; i++) {
  187 + $("<a href='#'>" + yohoHistory.split(" ")[i] + "</a>").appendTo(".historyList");
  188 + }
  189 + }
  190 +
  191 + };
  192 +
  193 + removeHistory = new Hammer($('.removeHistory')[0]);
  194 + removeHistory.on('tap', function(e) {
  195 + $(".historyList").html(" ");
  196 + localStorage.clear();
  197 + });
  198 +
164 199
165 // clearHistoryHammer = new Hammer($('#clear-text')[0]); 200 // clearHistoryHammer = new Hammer($('#clear-text')[0]);
166 // clearHistoryHammer.on('tap', function() { 201 // clearHistoryHammer.on('tap', function() {
@@ -173,4 +208,5 @@ if ($('.brand-search-page').length) { @@ -173,4 +208,5 @@ if ($('.brand-search-page').length) {
173 // $('#history-keyword').remove(); 208 // $('#history-keyword').remove();
174 // $(this).hide(); 209 // $(this).hide();
175 // }); 210 // });
  211 +
176 } 212 }
@@ -164,4 +164,49 @@ @@ -164,4 +164,49 @@
164 .search-result { 164 .search-result {
165 padding-top: 176rem / $pxConvertRem; 165 padding-top: 176rem / $pxConvertRem;
166 } 166 }
  167 +}
  168 +.history{
  169 + width: 100%;
  170 + height: auto;
  171 + overflow: hidden;
  172 + position: absolute;
  173 + left: 0;
  174 + top: 176rem / $pxConvertRem;
  175 + > h6{
  176 + width: 100%;
  177 + height: 88rem / $pxConvertRem;
  178 + line-height: 88rem / $pxConvertRem;
  179 + color: #999;
  180 + text-indent: .6rem;
  181 + font-size: 36em / $pxConvertRem;
  182 + }
  183 + .historyList{
  184 + width: 100%;
  185 + height: auto;
  186 + overflow: hidden;
  187 + display: block;
  188 + > a{
  189 + width: auto;
  190 + height: 58rem / $pxConvertRem;
  191 + overflow: hidden;
  192 + line-height: 58rem / $pxConvertRem;
  193 + margin: 0 0 20rem / $pxConvertRem .6rem;
  194 + padding: 0 20rem / $pxConvertRem;
  195 + float: left;
  196 + background-color:#f8f8f8;
  197 + color: #444;
  198 + }
  199 + }
  200 + > span{
  201 + width: auto;
  202 + height: 68rem / $pxConvertRem;
  203 + overflow: hidden;
  204 + display: inline-block;
  205 + line-height: 68rem / $pxConvertRem;
  206 + border:1px solid #e6e6e6;
  207 + padding: 0 28rem / $pxConvertRem;
  208 + font-size: 48em / $pxConvertRem;
  209 + margin-left: .6rem;
  210 + color: #000;
  211 + }
167 } 212 }
@@ -10,10 +10,16 @@ @@ -10,10 +10,16 @@
10 </div> 10 </div>
11 </form> 11 </form>
12 </div> 12 </div>
13 - 13 + <div class="history">
  14 + <h6>历史纪录</h6>
  15 + <div class="historyList">
  16 + </div>
  17 + <span class='removeHistory'>清空搜索历史</span>
  18 + </div>
14 <div class="search-result"> 19 <div class="search-result">
15 </div> 20 </div>
16 </div> 21 </div>
  22 +
17 <script id="brands-data" type="text/tmpl"> 23 <script id="brands-data" type="text/tmpl">
18 {{{brandList}}} 24 {{{brandList}}}
19 </script> 25 </script>