search page

@@ -683,4 +683,23 @@
             },
             ...
         ]
+    }
+
+
+## 搜索
+
+    {
+        hot: [
+            {
+                name: '夹克',
+                url: ''
+            },
+            ...
+        ],
+        history: [
+            {
+                name: '..',
+                url: ''
+            }
+        ]
     }
\ No newline at end of file

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Wed Sep 30 17:19:41 2015
+Created by FontForge 20120731 at Mon Oct 19 17:33:26 2015
  By Ads
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Sep 30 17:19:41 2015
     bbox="0 -224 3943 812"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E619"
+    unicode-range="U+0078-E61A"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -114,5 +114,8 @@ d="M224 192q-40 0 -68 28t-28 68t28 68t68 28t68 -28t28 -68t-28 -68t-68 -28zM512 1
     <glyph glyph-name="uniE619" unicode="&#xe619;" 
 d="M126 225q30 0 50.5 21.5t20.5 52.5q0 33 -20.5 54.5t-51 21.5t-51.5 -21.5t-21 -54.5q0 -45 38 -66q17 -8 35 -8zM512 225q15 0 28.5 5.5t23 15.5t15 24t5.5 29q0 9 -2 18t-5.5 16.5t-8 14t-10.5 11.5t-13.5 9t-15.5 5.5t-17 1.5q-30 0 -51 -21.5t-21 -54.5q0 -45 38 -66
 q16 -8 34 -8zM899.5 225q30.5 0 51 21.5t20.5 52.5q0 9 -2 18t-5.5 16.5t-8 14t-11 11.5t-13.5 9t-15 5.5t-17 1.5q-20 0 -36.5 -9.5t-26 -27t-9.5 -39.5q0 -31 21 -52.5t51.5 -21.5z" />
+    <glyph glyph-name="uniE61A" unicode="&#xe61a;" 
+d="M511 -84q-102 0 -188.5 50t-137 137t-50.5 189t50.5 188.5t137 137t188.5 50.5t189 -50.5t137 -137t50 -188.5t-50 -189t-137 -137t-189 -50zM676 421q7 6 0 12l-6 7q-2 2 -5.5 2t-6.5 -2l-138 -139l-137 137q-6 6 -12 0l-6 -6q-6 -6 0 -12l136 -137l-138 -138
+q-6 -6 0 -12l6 -6q7 -7 13 0l138 138l138 -139q6 -6 13 0l6 6q6 6 0 13l-139 138zM676 421z" />
   </font>
 </defs></svg>

@@ -4,5 +4,6 @@ require('./js/passport/index');
 require('./js/guang/index');
 require('./js/home/index');
 require('./js/product/index');
+require('./js/index/index');
 
 module.exports = yohobuy;

+/**
+ * Index打包入口
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/19
+ */
+
+require('./search');
\ No newline at end of file

+/**
+ * 搜索JS
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/19
+ */
+
+var $ = require('yoho.zepto');
+
+var $input = $('#search-input > input');
+
+var $clear = $('#search-input > .clear-input');
+
+var $history = $('.history');
+
+$('#clear-history').bind('touchstart', function() {
+    $.ajax({
+        type: 'POST',
+        url: '/search/clearHistory',
+        success: function(data) {
+            if (data.code === 200) {
+                $history.html(''); //clear search history items
+            }
+        }
+    });
+});
+
+$('#search').bind('touchstart', function() {
+    var val = $input.val();
+
+    $.ajax({
+        type: 'POST',
+        url: '/search',
+        data: {
+            val: val
+        },
+        success: function(data) {
+            if (data.code === 200) {
+                location.href = data.data;
+            }
+        }
+    });
+});
+
+$input.bind('input', function() {
+    if ($input.val() === '') {
+        $clear.addClass('hide');
+    } else {
+        $clear.removeClass('hide');
+    }
+});
+
+$clear.bind('touchstart', function() {
+    $input.val('').trigger('input');
+});
\ No newline at end of file

@@ -39,3 +39,5 @@
    
 }
 
+@import "search";
+

+.search-page {
+    .search-input {
+        position: relative;
+        padding: 7px 46px 7px 15px;
+        background: #f8f8f8;
+
+        .search-icon {
+            position: absolute;
+            font-size: 12px;
+            top: 16px;
+            left: 24px;
+        }
+
+        input {
+            height: 30px;
+            width: 100%;
+            border-radius: 15px;
+            text-indent: 26px;
+            background: #fff;
+            border: none;
+        }
+
+        .clear-input {
+            position: absolute;
+            top: 12px;
+            right: 50px;
+        }
+
+        .search {
+            position: absolute;
+            top: 12px;
+            right: 0;
+            border: none;
+            background: transparent;
+            font-size: 16px;
+        }
+    }
+
+    .search-items {
+        padding: 20px 10px;
+
+        h3 {
+            font-size: 12px;
+            margin-bottom: 10px;
+        }
+
+        li {
+            float: left;
+            height: 34px;
+            line-height: 34px;
+            font-size: 14px;
+            height: 34px;
+            line-height: 34px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+            padding: 0 10px;
+            background: #f8f8f8;
+            color: #000;
+        }
+
+        .clear-history {
+            height: 32px;
+            line-height: 32px;
+            border: 1px solid #e6e6e6;
+            background: #fff;
+            font-size: 14px;
+        }
+    }
+}
\ No newline at end of file

+{{> layout/header}}
+<div class="search-page yoho-page">
+    {{# search}}
+        <div id="search-input" class="search-input">
+            <i class="search-icon iconfont">&#xe60f;</i>
+            <input type="text" placeholder="搜索商品">
+            <i class="clear-input iconfont hide">&#xe61a;</i>
+            <button id="search" class="search">搜索</button>
+        </div>
+        <div class="search-items">
+            <div class="hot-search">
+                <h3>热门搜索</h3>
+                <ul class="hot clearfix">
+                    {{# hot}}
+                        <li>
+                            <a href={{url}}>{{name}}</a>
+                        </li>
+                    {{/ hot}}
+                </ul>
+            </div>
+            <div class="history-search">
+                <h3>历史搜索</h3>
+                <ul class="history clearfix">
+                    {{# history}}
+                        <li>
+                            <a href={{url}}>{{name}}</a>
+                        </li>
+                    {{/ history}}
+                </ul>
+            </div>
+            <button id="clear-history" class="clear-history">清空搜索历史</button>
+        </div>
+    {{/ search}}
+</div>
+{{> layout/footer}}
\ No newline at end of file

@@ -122,4 +122,11 @@
     <script>
         seajs.use('js/category/index');
     </script>
+{{/if}}
+
+{{!-- 搜索 --}}
+{{#if searchPage}}
+    <script>
+        seajs.use('js/index/search');
+    </script>
 {{/if}}
\ No newline at end of file

@@ -7,6 +7,38 @@ class SearchController extends AbstractAction
 {
     public function indexAction()
     {
-        echo 'search';
+        $data = array(
+            array(
+                'hot' => array(
+                    array(
+                        'name' => '夹克',
+                        'url' => 'm.yohobuy.com'
+                    ),
+                    array(
+                        'name' => '休闲运动鞋',
+                        'url' => 'm.yohobuy.com'
+                    ),
+                    array(
+                        'name' => 'Into the Rainbow',
+                        'url' => 'm.yohobuy.com'
+                    )
+                ),
+                'history' => array(
+                    array(
+                        'name' => 'what',
+                        'url' => 'm.yohobuy.com'
+                    ),
+                    array(
+                        'name' => 'the',
+                        'url' => 'm.yohobuy.com'
+                    ),
+                    array(
+                        'name' => 'fuck',
+                        'url' => 'm.yohobuy.com'
+                    )
+                )
+            )
+        );
+        $this->_view->display('index', array('search' => $data, 'searchPage' => true, 'pageFooter' => true));
     }
 }
\ No newline at end of file