品牌搜索

@@ -16,7 +16,11 @@ var searchH = $('.newbrand-search').outerHeight(),
     headerH = $('.yoho-header').outerHeight(),
     brandSwipe = parseInt(searchH) + parseInt(headerH) - 1;
 
-var myHammer;
+var myHammer,
+    searchHammer,
+    clearTextHammer,
+    brandsData,
+    $keyword;
 
 swiper = new Swiper('.swiper-container', {
     lazyLoading: true,
@@ -32,27 +36,25 @@ $('.yoho-header').css({
 });
 $('.banner-top').css('padding-top', '90px');
 
-if ($brandList.length > 0) {
-    $(window).scroll(function() {
-        var scrTop = $(window).scrollTop();
-
-        $('.brand-list').each(function() {
-            var offTop = $(this).offset().top - brandSwipe;
-
-            if (scrTop >= offTop) {
-                $brandList.find('.title-bar').css('position', 'static');
-                $(this).find('.title-bar').css({
-                    position: 'fixed',
-                    top: brandSwipe
-                });
-            } else {
-                $(this).find('.title-bar').css('position', 'static');
-            }
-        });
+$(window).scroll(function() {
+    var scrTop = $(window).scrollTop();
+
+    $('.brand-list').each(function() {
+        var offTop = $(this).offset().top - brandSwipe;
+
+        if (scrTop >= offTop) {
+            $brandList.find('.title-bar').css('position', 'static');
+            $(this).find('.title-bar').css({
+                position: 'fixed',
+                top: brandSwipe
+            });
+        } else {
+            $(this).find('.title-bar').css('position', 'static');
+        }
     });
-}
+});
 
-if ($('#right-bar .con').find('b').unbind()[0]) {
+function rightBarBindClick() {
     myHammer = new Hammer($('#right-bar .con').find('b').unbind()[0]);
     myHammer.on('tap', function(e) {
         var index = $(this).index();
@@ -63,49 +65,118 @@ if ($('#right-bar .con').find('b').unbind()[0]) {
     });
 }
 
-function searchResult(type) {
-    var keyword = $('#keyword').val(),
-        gender = $('#gender').val();
+if ($('#right-bar .con').find('b').unbind()[0]) {
+    rightBarBindClick();
+}
+
+/**
+ * 品牌搜索
+ */
+
+function searchResult() {
+    var keyword = ($keyword.val() + '').toLowerCase();
+    var result = {},
+        i = 0,
+        rightBarHtml,
+        html = '';
+
+    // 遍历首字母搜索
+    $.each(brandsData, function(k, v) {
+        if ($.isArray(v)) {
+
+            // 遍历品牌，进行匹配
+            $.each(v, function(i, brand) {
+                if (brand.name.toLowerCase().indexOf(keyword) > -1) {
+                    result[k] = result[k] || [];
+                    result[k].push(brand);
+                }
+            });
+        }
+    });
+
+    // 根据搜索结果生成 HTML
+    rightBarHtml = '<div id="right-bar" class="right-bar"><div class="con" id="con">';
+    $.each(result, function(k, v) {
+        var brandHtml = ['<div class="brand-list bar-', i, '">'];
+
+        i++;
+        brandHtml.push('<div class="title-bar"><h2>');
+        brandHtml.push(k);
+        brandHtml.push('</h2></div>');
+        $.each(v, function(i, brand) {
+            brandHtml.push('<p><a href="' + brand.url + '">' + 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('</div>');
+        html += brandHtml.join('');
 
-    $.get('/brands/search', {
-        keyword: keyword,
-        gender: gender,
-        type: type
-    }, function(html) {
-        $('.search-result').html(html);
+        if (k.indexOf(0) > -1) {
+            k = '#';
+        }
 
+        rightBarHtml = rightBarHtml + '<b>' + k + '</b>';
     });
+
+    rightBarHtml += '</div>';
+
+    if (Object.keys(result).length > 0) {
+        html += rightBarHtml;
+    }
+
+    // 插入 dom，绑定事件
+    $('.search-result').html(html);
+
+    if (Object.keys(result).length > 0) {
+        rightBarBindClick();
+    }
 }
 
-$('#keyword').on('keyup', function() {
-    searchResult(0);
-}).on('keydown', function() {
-    $(this).closest('.search-box').css('width', '11.25rem');
-    $('.search-action').show();
-}).on('blur', function() {
-    $(this).closest('.search-box').css('width', '12.5rem');
-    $('.search-action').hide();
-});
+if ($('.brand-search-page').length) {
+    brandsData = $.parseJSON($('#brands-data').html());
+    $keyword = $('#keyword');
+
+    $keyword.on('input', function() {
+        if ($keyword.val().length) {
+            searchResult();
+            $(this).closest('.search-box').css('width', '11.25rem');
+            $('.search-action').show();
+        } else {
+            $(this).closest('.search-box').css('width', '12.5rem');
+            $('.search-action').hide();
+        }
+    });
 
-$('#search-btn').on('tap', function() {
-    searchResult(1);
-});
+    searchHammer = new Hammer($('.search-btn')[0]);
+    searchHammer.on('tap', function() {
+        searchResult();
+        return false;
+    });
 
-$('.clear-text').on('tap', function() {
-    $('#keyword').val('').trigger('input');
-});
+    clearTextHammer = new Hammer($('.clear-text')[0]);
+    clearTextHammer.on('tap', function() {
+        $keyword.val('').trigger('input');
+        return false;
+    });
 
-$('form.search-box').on('submit', function() {
-    return false;
-});
+    $('form.search-box').on('submit', function() {
+        return false;
+    });
 
-$('.clear-history').on('tap', function() {
+    // clearHistoryHammer = new Hammer($('#clear-text')[0]);
+    // clearHistoryHammer.on('tap', function() {
 
-    // setcookie('h_brands', '', {
-    //     expire: -1,
-    //     path: '/',
-    //     domain: '.m.yohobuy.com'
+    //     // setcookie('h_brands', '', {
+    //     //     expire: -1,
+    //     //     path: '/',
+    //     //     domain: '.m.yohobuy.com'
+    //     // });
+    //     $('#history-keyword').remove();
+    //     $(this).hide();
     // });
-    $('#history-keyword').remove();
-    $(this).hide();
-});
+}

@@ -160,4 +160,7 @@
         .con {       
             padding-top: 10rem / $pxConvertRem;    
         }
+    .search-result {
+        padding-top: 176rem / $pxConvertRem;
+    }    
 }
\ No newline at end of file

 {{> layout/header}}
-<div class="brand-page yoho-page">
+<div class="brand-page brand-search-page yoho-page">
     <div class="newbrand-search">
         <form class="search-box clearfix">          
             <input type="text" class="search-input" id="keyword" placeholder="查找品牌">
-            <input type="hidden" id="gender" name="gender" value="1,3">
             <i class="search-icon iconfont">&#xe60f;</i>
             <div class="search-action">
                 <span class="iconfont clear-text">&#xe623;</span>
@@ -15,7 +14,7 @@
     <div class="search-result">
     </div>
 </div>
-<script type="text/tmpl">
+<script id="brands-data" type="text/tmpl">
     {{{brandList}}}
 </script>
 {{> layout/footer}}

@@ -117,7 +117,8 @@ class BrandModel
     public static function getBrandForSearch($channel)
     {
         $result = array();
-        
+        // 模板中的使用JS标识
+        $result['brandPage'] = true;
         $brand = BrandData::getBrandsData($channel);
         if (!empty($brand['data']['brands'])) {
             $list = array();