搜索联动

@@ -70,6 +70,11 @@ const Query = {
             }
         }).catch(next);
 
+    },
+    suggest: (req, res, next) => {
+        Search.getSuggest(req.query).then(result => {
+            res.json(result);
+        }).catch(next);
     }
 };
 

@@ -5,6 +5,7 @@
 'use strict';
 
 const api = global.yoho.API;
+const helpers = global.yoho.helpers;
 const _ = require('lodash');
 
 /**
@@ -107,6 +108,24 @@ const Search = {
         return api.get('', _.assign({
             method: 'web.regular.groupsort'
         }, params), {code: 200});
+    },
+    getSuggest(params) {
+        return api.get('', _.assign({
+            method: 'app.search.fuzzy'
+        }, params), {code: 200}).then(result => {
+            let list  = result.data || [];
+            let suggest = [];
+
+            _.forEach(list, function(value) {
+                suggest.push({
+                    href: helpers.urlFormat('/product/query', {query: value.keyword}),
+                    keyword: value.keyword,
+                    count: value.count
+                });
+            });
+
+            return suggest;
+        });
     }
 };
 

@@ -32,6 +32,7 @@ router.post('/shop/togglecollect', auth, fav.shop);
 router.post('/brand/togglecollect', auth, fav.brand);
 
 router.get('/query', query.index);
+router.get('/query/suggest', query.suggest);
 
 router.get('/getRecommendProduct', recommend.getRecommendProduct);
 router.get('/getRecommendShop', recommend.getRecommendShop);

@@ -22,15 +22,15 @@ module.exports = {
     },
     cookieDomain: 'yohoblk.com',
     domains: {
-         // singleApi: 'http://single.yoho.cn/',
-         // api: 'http://api.yoho.yohoops.org/',
-         // service: 'http://service.yoho.yohoops.org/',
-         // search: 'http://search.yohoops.org/yohosearch/'
+          singleApi: 'http://single.yoho.cn/',
+          api: 'http://api.yoho.yohoops.org/',
+          service: 'http://service.yoho.yohoops.org/',
+          search: 'http://search.yohoops.org/yohosearch/'
 
-        api: 'http://api-test3.yohops.com:9999/',
-        service: 'http://service-test3.yohops.com:9999/',
-        liveApi: 'http://testapi.live.yohops.com:9999/',
-        singleApi: 'http://api-test3.yohops.com:9999/'
+        //api: 'http://api-test3.yohops.com:9999/',
+        //service: 'http://service-test3.yohops.com:9999/',
+        //liveApi: 'http://testapi.live.yohops.com:9999/',
+        //singleApi: 'http://api-test3.yohops.com:9999/'
     },
     useOneapm: false,
     useCache: false,

@@ -67,14 +67,7 @@
                                 <span class="iconfont right clear-input">&#xe608;</span>
                             </form>
                         </div>
-                        <ul class="search-hint clearfix">
-                            <li class="cur">
-                                <a href="#">
-                                    <span>大衣</span>
-                                    <span class="right">约300个商品</span>
-                                </a>
-                            </li>
-                        </ul>
+                        <ul class="search-hint clearfix"></ul>
                         <div class="hot-search hide"></div>
                     </div>
                 </div>

@@ -11,9 +11,11 @@ var $miniBag = $('.mini-bag-box'),
 var $searchWrap = $('.search-wrapper'),
     $searchForm = $('#search-form'),
     $searchKey = $('#search-key'),
+    $searchHint = $('.search-hint'),
     $clearInput = $('.clear-input');
 
 var goodsTpl = require('../../tpl/common/bag-goods.hbs');
+var searchHintTpl = require('../../tpl/header/search-hint.hbs');
 var delayer;
 
 require('yoho-jquery-nanoscroller');
@@ -178,6 +180,62 @@ $searchKey.keyup(function(e) {
     }
 });
 
+// 关键词搜索联想
+function searchSuggest(key) {
+    $.get('//www.yohoblk.com/product/query/suggest', {
+        keyword: key
+    }, function(data) {
+        if (data.length >=1) {
+            $searchHint.html(searchHintTpl({list: data})).show();
+        } else {
+            $searchHint.hide();
+        }
+    });
+}
+
+$searchKey.keyup(function(e) {
+    var val = $.trim($(this).val()),
+        $child = $searchHint.find('li'),
+        $act = $searchHint.find('.action'),
+        $focus;
+
+    if (e.which > 36 && e.which < 41) {
+
+        if (e.which === 38) {
+            $focus = $act.prev();
+            if (!$act.length || !$focus.length) {
+                $focus = $child.eq($child.length - 1);
+            }
+        } else if (e.which === 40) {
+            $focus = $act.next();
+            if (!$act.length || !$focus.length) {
+                $focus = $child.eq(0);
+            }
+        } else {
+            return;
+        }
+
+        $child.removeClass('action');
+        $focus.addClass('action');
+        $(this).val($focus.find('.search-value').text());
+    } else if (e.which === 13) {
+        if (val) {
+            $searchForm.submit();
+        }
+    } else {
+        if ($searchHint && $searchHint.length) {
+            val = val.replace(new RegExp('\'', 'gm'), ''); // 去掉特殊字符
+            searchSuggest(val);
+        }
+    }
+
+    if (val) {
+        $clearInput.show();
+    } else {
+        $clearInput.hide();
+    }
+});
+
 // ie8输入框提示特殊处理
 // 应产品要求所有浏览器获得焦点提示文字隐藏
 // if (!!window.ActiveXObject && !!document.documentMode) {
@@ -193,6 +251,10 @@ $searchKey.focus(function() {
     if ($.trim(key) === '') {
         $searchKey.val('search').css('color', '#aaa');
     }
+
+    setTimeout(function() {
+        $searchHint.hide();
+    }, 200);
 }).val('search').css('color', '#aaa');
 
 // }

@@ -394,12 +394,25 @@
                 padding: 0 20px;
             }
 
+            li:first-child {
+                margin-top: 10px;
+            }
+
             .cur {
                 background: #1b1b1b;
             }
 
+            .action {
+                background: #232323;
+            }
+
+            .cur:hover {
+                background: #232323;
+            }
+
             a {
                 color: #fff;
+                display: block;
             }
         }
 

+{{#each list}}
+    <li class="cur">
+        <a href="{{href}}" title="{{keyword}}">
+            <span class="search-value">{{keyword}}</span>
+            <span class="right">约{{count}}个商品</span>
+        </a>
+    </li>
+{{/each}}