搜索联动

@@ -19,6 +19,6 @@ if (qs) {
 
 
 new ProductListWithFilter(initParams);
 new ProductListWithFilter(initParams);
 
 
-// require('./search/list');
+require('./search/search-list');
 require('common/footer');
 require('common/footer');
 require('./shop/coupon');
 require('./shop/coupon');

+import Page from 'yoho-page';
+import Tip from 'plugin/tip';
+
+class SearchList extends Page {
+    constructor() {
+        super();
+
+        this.selector = {
+            input: $('#search-input').find('input[name="query"]'),
+            clear: $('#search-input .clear-input'),
+            buriedpoint: $('.buriedpoint'),
+            search: $('#search')
+        };
+
+        this.init();
+    }
+
+    init() {
+        this.inputAction();
+    }
+
+    /**
+     * 搜索输入联动
+     */
+    inputAction() {
+        let $searchAssociate = $('.search-associate');
+        let $icon = $('.search-icon');
+        let $searchItems = $('.search-items');
+
+        this.selector.input.on('input', () => {
+            if (this.selector.input.val() === '') {
+                $icon.css('color', '#b2b2b2');
+                this.selector.clear.addClass('hide');
+                $searchAssociate.html('');
+                $searchItems.show();
+                $searchAssociate.hide();
+            } else {
+                $icon.css('color', '#666');
+                this.selector.clear.removeClass('hide');
+                $searchAssociate.show();
+            }
+
+            // 联动搜索
+            $.ajax({
+                url: '/product/search/fuzzyDatas',
+                data: {
+                    keyword: this.selector.input.val()
+                },
+                dataType: 'json',
+                success: (data) => {
+                    let ajaxHtml = '';
+                    let i;
+
+                    if (data.length > 0) {
+                        for (i = 0; i < data.length; i++) {
+                            ajaxHtml += '<li><span class="keyword">' + data[i].keyword + '</span><span class="count">' +
+                                data[i].count + ' items<i class="iconfont">&#xe614;</i></span></li>';
+                        }
+
+                        $searchAssociate.html(ajaxHtml);
+                        $searchItems.hide();
+                    } else {
+                        $searchAssociate.html('');
+                    }
+
+                    $searchAssociate.find('li').on('touchend', function() {
+                        this.selector.buriedpoint.val($(this).find('.keyword').html());
+                        this.selector.search.closest('form').submit();
+                    });
+                },
+                error: () => {
+                    Tip.show('网络断开连接了~');
+                }
+            });
+        });
+    }
+}
+
+export default new SearchList();