fe / YOHOBUYWAP · Commits

Go to a project

Authored by ccbikai
Commit 4775d447904b38ea5900233812e17784571cfe17 1 parent 6a5d0d57

品牌搜索

Inline Side-by-side
Showing 4 changed files with 133 additions and 59 deletions
@@ -16,7 +16,11 @@ var searchH = $('.newbrand-search').outerHeight(), @@ -16,7 +16,11 @@ var searchH = $('.newbrand-search').outerHeight(),
16 headerH = $('.yoho-header').outerHeight(), 16 headerH = $('.yoho-header').outerHeight(),
17 brandSwipe = parseInt(searchH) + parseInt(headerH) - 1; 17 brandSwipe = parseInt(searchH) + parseInt(headerH) - 1;
18 18
19 -var myHammer; 19 +var myHammer,
  20 + searchHammer,
  21 + clearTextHammer,
  22 + brandsData,
  23 + $keyword;
20 24
21 swiper = new Swiper('.swiper-container', { 25 swiper = new Swiper('.swiper-container', {
22 lazyLoading: true, 26 lazyLoading: true,
@@ -32,27 +36,25 @@ $('.yoho-header').css({ @@ -32,27 +36,25 @@ $('.yoho-header').css({
32 }); 36 });
33 $('.banner-top').css('padding-top', '90px'); 37 $('.banner-top').css('padding-top', '90px');
34 38
35 -if ($brandList.length > 0) {  
36 - $(window).scroll(function() {  
37 - var scrTop = $(window).scrollTop();  
38 -  
39 - $('.brand-list').each(function() {  
40 - var offTop = $(this).offset().top - brandSwipe;  
41 -  
42 - if (scrTop >= offTop) {  
43 - $brandList.find('.title-bar').css('position', 'static');  
44 - $(this).find('.title-bar').css({  
45 - position: 'fixed',  
46 - top: brandSwipe  
47 - });  
48 - } else {  
49 - $(this).find('.title-bar').css('position', 'static');  
50 - }  
51 - }); 39 +$(window).scroll(function() {
  40 + var scrTop = $(window).scrollTop();
  41 +
  42 + $('.brand-list').each(function() {
  43 + var offTop = $(this).offset().top - brandSwipe;
  44 +
  45 + if (scrTop >= offTop) {
  46 + $brandList.find('.title-bar').css('position', 'static');
  47 + $(this).find('.title-bar').css({
  48 + position: 'fixed',
  49 + top: brandSwipe
  50 + });
  51 + } else {
  52 + $(this).find('.title-bar').css('position', 'static');
  53 + }
52 }); 54 });
53 -} 55 +});
54 56
55 -if ($('#right-bar .con').find('b').unbind()[0]) { 57 +function rightBarBindClick() {
56 myHammer = new Hammer($('#right-bar .con').find('b').unbind()[0]); 58 myHammer = new Hammer($('#right-bar .con').find('b').unbind()[0]);
57 myHammer.on('tap', function(e) { 59 myHammer.on('tap', function(e) {
58 var index = $(this).index(); 60 var index = $(this).index();
@@ -63,49 +65,118 @@ if ($('#right-bar .con').find('b').unbind()[0]) { @@ -63,49 +65,118 @@ if ($('#right-bar .con').find('b').unbind()[0]) {
63 }); 65 });
64 } 66 }
65 67
66 -function searchResult(type) {  
67 - var keyword = $('#keyword').val(),  
68 - gender = $('#gender').val(); 68 +if ($('#right-bar .con').find('b').unbind()[0]) {
  69 + rightBarBindClick();
  70 +}
  71 +
  72 +/**
  73 + * 品牌搜索
  74 + */
  75 +
  76 +function searchResult() {
  77 + var keyword = ($keyword.val() + '').toLowerCase();
  78 + var result = {},
  79 + i = 0,
  80 + rightBarHtml,
  81 + html = '';
  82 +
  83 + // 遍历首字母搜索
  84 + $.each(brandsData, function(k, v) {
  85 + if ($.isArray(v)) {
  86 +
  87 + // 遍历品牌，进行匹配
  88 + $.each(v, function(i, brand) {
  89 + if (brand.name.toLowerCase().indexOf(keyword) > -1) {
  90 + result[k] = result[k] || [];
  91 + result[k].push(brand);
  92 + }
  93 + });
  94 + }
  95 + });
  96 +
  97 + // 根据搜索结果生成 HTML
  98 + rightBarHtml = '<div id="right-bar" class="right-bar"><div class="con" id="con">';
  99 + $.each(result, function(k, v) {
  100 + var brandHtml = ['<div class="brand-list bar-', i, '">'];
  101 +
  102 + i++;
  103 + brandHtml.push('<div class="title-bar"><h2>');
  104 + brandHtml.push(k);
  105 + brandHtml.push('</h2></div>');
  106 + $.each(v, function(i, brand) {
  107 + brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
  108 + if (brand.isNew) {
  109 + brandHtml.push('<i class="icon-hot">Hot</i>');
  110 + }
  111 + if (brand.isHot) {
  112 + brandHtml.push('<i class="icon-new">New</i>');
  113 + }
  114 + brandHtml.push('</a></p>');
  115 + });
  116 + brandHtml.push('</div>');
  117 + html += brandHtml.join('');
69 118
70 - $.get('/brands/search', {  
71 - keyword: keyword,  
72 - gender: gender,  
73 - type: type  
74 - }, function(html) {  
75 - $('.search-result').html(html); 119 + if (k.indexOf(0) > -1) {
  120 + k = '#';
  121 + }
76 122
  123 + rightBarHtml = rightBarHtml + '<b>' + k + '</b>';
77 }); 124 });
  125 +
  126 + rightBarHtml += '</div>';
  127 +
  128 + if (Object.keys(result).length > 0) {
  129 + html += rightBarHtml;
  130 + }
  131 +
  132 + // 插入 dom，绑定事件
  133 + $('.search-result').html(html);
  134 +
  135 + if (Object.keys(result).length > 0) {
  136 + rightBarBindClick();
  137 + }
78 } 138 }
79 139
80 -$('#keyword').on('keyup', function() {  
81 - searchResult(0);  
82 -}).on('keydown', function() {  
83 - $(this).closest('.search-box').css('width', '11.25rem');  
84 - $('.search-action').show();  
85 -}).on('blur', function() {  
86 - $(this).closest('.search-box').css('width', '12.5rem');  
87 - $('.search-action').hide();  
88 -}); 140 +if ($('.brand-search-page').length) {
  141 + brandsData = $.parseJSON($('#brands-data').html());
  142 + $keyword = $('#keyword');
  143 +
  144 + $keyword.on('input', function() {
  145 + if ($keyword.val().length) {
  146 + searchResult();
  147 + $(this).closest('.search-box').css('width', '11.25rem');
  148 + $('.search-action').show();
  149 + } else {
  150 + $(this).closest('.search-box').css('width', '12.5rem');
  151 + $('.search-action').hide();
  152 + }
  153 + });
89 154
90 -$('#search-btn').on('tap', function() {  
91 - searchResult(1);  
92 -}); 155 + searchHammer = new Hammer($('.search-btn')[0]);
  156 + searchHammer.on('tap', function() {
  157 + searchResult();
  158 + return false;
  159 + });
93 160
94 -$('.clear-text').on('tap', function() {  
95 - $('#keyword').val('').trigger('input');  
96 -}); 161 + clearTextHammer = new Hammer($('.clear-text')[0]);
  162 + clearTextHammer.on('tap', function() {
  163 + $keyword.val('').trigger('input');
  164 + return false;
  165 + });
97 166
98 -$('form.search-box').on('submit', function() {  
99 - return false;  
100 -}); 167 + $('form.search-box').on('submit', function() {
  168 + return false;
  169 + });
101 170
102 -$('.clear-history').on('tap', function() { 171 + // clearHistoryHammer = new Hammer($('#clear-text')[0]);
  172 + // clearHistoryHammer.on('tap', function() {
103 173
104 - // setcookie('h_brands', '', {  
105 - // expire: -1,  
106 - // path: '/',  
107 - // domain: '.m.yohobuy.com' 174 + // // setcookie('h_brands', '', {
  175 + // // expire: -1,
  176 + // // path: '/',
  177 + // // domain: '.m.yohobuy.com'
  178 + // // });
  179 + // $('#history-keyword').remove();
  180 + // $(this).hide();
108 // }); 181 // });
109 - $('#history-keyword').remove();  
110 - $(this).hide();  
111 -}); 182 +}
@@ -160,4 +160,7 @@ @@ -160,4 +160,7 @@
160 .con { 160 .con {
161 padding-top: 10rem / $pxConvertRem; 161 padding-top: 10rem / $pxConvertRem;
162 } 162 }
  163 + .search-result {
  164 + padding-top: 176rem / $pxConvertRem;
  165 + }
163 } 166 }
1 {{> layout/header}} 1 {{> layout/header}}
2 -<div class="brand-page yoho-page"> 2 +<div class="brand-page brand-search-page yoho-page">
3 <div class="newbrand-search"> 3 <div class="newbrand-search">
4 <form class="search-box clearfix"> 4 <form class="search-box clearfix">
5 <input type="text" class="search-input" id="keyword" placeholder="查找品牌"> 5 <input type="text" class="search-input" id="keyword" placeholder="查找品牌">
6 - <input type="hidden" id="gender" name="gender" value="1,3">  
7 <i class="search-icon iconfont">&#xe60f;</i> 6 <i class="search-icon iconfont">&#xe60f;</i>
8 <div class="search-action"> 7 <div class="search-action">
9 <span class="iconfont clear-text">&#xe623;</span> 8 <span class="iconfont clear-text">&#xe623;</span>
@@ -15,7 +14,7 @@ @@ -15,7 +14,7 @@
15 <div class="search-result"> 14 <div class="search-result">
16 </div> 15 </div>
17 </div> 16 </div>
18 -<script type="text/tmpl"> 17 +<script id="brands-data" type="text/tmpl">
19 {{{brandList}}} 18 {{{brandList}}}
20 </script> 19 </script>
21 {{> layout/footer}} 20 {{> layout/footer}}
@@ -117,7 +117,8 @@ class BrandModel @@ -117,7 +117,8 @@ class BrandModel
117 public static function getBrandForSearch($channel) 117 public static function getBrandForSearch($channel)
118 { 118 {
119 $result = array(); 119 $result = array();
120 - 120 + // 模板中的使用JS标识
  121 + $result['brandPage'] = true;
121 $brand = BrandData::getBrandsData($channel); 122 $brand = BrandData::getBrandsData($channel);
122 if (!empty($brand['data']['brands'])) { 123 if (!empty($brand['data']['brands'])) {
123 $list = array(); 124 $list = array();