update

@@ -5,7 +5,7 @@
  */
 
 var $ = require('jquery'),
-    Hammer = require('hammer'),
+    Hammer = require('yoho.hammer'),
     Swiper = require('yoho.iswiper'),
     lazyLoad = require('yoho.lazyload');
 
@@ -16,7 +16,13 @@ var searchH = $('.newbrand-search').outerHeight(),
     headerH = $('.yoho-header').outerHeight(),
     brandSwipe = parseInt(searchH) + parseInt(headerH) - 1;
 
-var myHammer;
+var myHammer,
+    brandsData,
+    $keyword,
+    searchBtnHammer,
+    clearTextHammer;
+
+var $rightBarCon = $('#right-bar .con').find('b').unbind();
 
 swiper = new Swiper('.swiper-container', {
     lazyLoading: true,
@@ -32,31 +38,151 @@ $('.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');
+        }
+    });
+});
+
+
+function rightBarBindClick() {
+    $rightBarCon = $('#right-bar .con').find('b').unbind();
+    myHammer = new Hammer($rightBarCon[0]);
+    myHammer.on('tap', function(e) {
+        var index = $rightBarCon.index();
+
+        if ($('.bar-' + index).size() > 0) {
+            document.body.scrollTop = parseInt($('.bar-' + index)[0].offsetTop) - parseInt(brandSwipe - 1);
+        }
+        e.srcEvent.stopPropagation();
+    });
+}
+
+if ($rightBarCon[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('');
+
+        if (k.indexOf(0) > -1) {
+            k = '#';
+        }
+
+        rightBarHtml = rightBarHtml + '<b>' + k + '</b>';
     });
-}
 
-myHammer = new Hammer($('#right-bar .con').find('b').unbind()[0]);
-myHammer.on('tap', function(e) {
-    var index = $(this).index();
+    rightBarHtml += '</div>';
 
-    if ($('.bar-' + index).size() > 0) {
-        document.body.scrollTop = parseInt($('.bar-' + index)[0].offsetTop) - parseInt(brandSwipe - 1);
+    if (Object.keys(result).length > 0) {
+        html += rightBarHtml;
     }
-});
+
+    // 插入 dom，绑定事件
+    $('.search-result').html(html);
+
+    if (Object.keys(result).length > 0) {
+        rightBarBindClick();
+    }
+}
+
+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();
+        }
+    });
+
+
+    searchBtnHammer = new Hammer($('.search-btn')[0]);
+    searchBtnHammer.on('tap', function(e) {
+        searchResult();
+        e.srcEvent.stopPropagation();
+    });
+
+    clearTextHammer = new Hammer($('.clear-text')[0]);
+    clearTextHammer.on('tap', function(e) {
+        $('#keyword').val('').trigger('input');
+        e.srcEvent.stopPropagation();
+    });
+
+    $('form.search-box').on('submit', function() {
+        return false;
+    });
+
+    // clearHistoryHammer = new Hammer($('#clear-text')[0]);
+    // clearHistoryHammer.on('tap', function() {
+
+    //     // setcookie('h_brands', '', {
+    //     //     expire: -1,
+    //     //     path: '/',
+    //     //     domain: '.m.yohobuy.com'
+    //     // });
+    //     $('#history-keyword').remove();
+    //     $(this).hide();
+    // });
+}