Showing
3 changed files
with
91 additions
and
4 deletions
@@ -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> |
-
Please register or login to post a comment