From f12605b30f77b5d85f24b3ceedba0180ab08da03 Mon Sep 17 00:00:00 2001
From: wsling <shuiling.wang@yoho.cn>
Date: Tue, 21 Jun 2016 19:56:17 +0800
Subject: [PATCH] search 优化
---
npm-debug.log | 22 ++++++++++++++++++++++
static/img/search/del-ico.png | Bin 0 -> 1345 bytes
static/img/search/hot-ico.png | Bin 0 -> 1566 bytes
static/img/search/time-ico.png | Bin 0 -> 1574 bytes
static/img/sprite.search.png | Bin 0 -> 1478 bytes
static/js/index/search.js | 47 +++++++++++++++++++++++++++++++++++++++++++++--
static/sass/index/_search.css | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------
template/m.yohobuy.com/actions/index/search/index.phtml | 30 +++++++++++++++++-------------
template/m.yohobuy.com/partials/product/list.phtml | 9 +++++++++
yohobuy/m.yohobuy.com/application/controllers/Search.php | 3 +++
10 files changed, 193 insertions(+), 30 deletions(-)
create mode 100644 npm-debug.log
create mode 100644 static/img/search/del-ico.png
create mode 100644 static/img/search/hot-ico.png
create mode 100644 static/img/search/time-ico.png
create mode 100644 static/img/sprite.search.png
diff --git a/npm-debug.log b/npm-debug.log
new file mode 100644
index 0000000..683cd08
--- /dev/null
+++ b/npm-debug.log
@@ -0,0 +1,22 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe',
+1 verbose cli 'D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
+1 verbose cli 'run',
+1 verbose cli 'dev' ]
+2 info using npm@2.15.1
+3 info using node@v4.4.4
+4 verbose stack Error: ENOENT: no such file or directory, open 'E:\wwwroot\yohobuywap\package.json'
+4 verbose stack at Error (native)
+5 verbose cwd E:\wwwroot\yohobuywap
+6 error Windows_NT 6.1.7601
+7 error argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
+8 error node v4.4.4
+9 error npm v2.15.1
+10 error path E:\wwwroot\yohobuywap\package.json
+11 error code ENOENT
+12 error errno -4058
+13 error syscall open
+14 error enoent ENOENT: no such file or directory, open 'E:\wwwroot\yohobuywap\package.json'
+14 error enoent This is most likely not a problem with npm itself
+14 error enoent and is related to npm not being able to find a file.
+15 verbose exit [ -4058, true ]
diff --git a/static/img/search/del-ico.png b/static/img/search/del-ico.png
new file mode 100644
index 0000000..3958010
Binary files /dev/null and b/static/img/search/del-ico.png differ
diff --git a/static/img/search/hot-ico.png b/static/img/search/hot-ico.png
new file mode 100644
index 0000000..884a1fe
Binary files /dev/null and b/static/img/search/hot-ico.png differ
diff --git a/static/img/search/time-ico.png b/static/img/search/time-ico.png
new file mode 100644
index 0000000..48680d7
Binary files /dev/null and b/static/img/search/time-ico.png differ
diff --git a/static/img/sprite.search.png b/static/img/sprite.search.png
new file mode 100644
index 0000000..04964e4
Binary files /dev/null and b/static/img/sprite.search.png differ
diff --git a/static/js/index/search.js b/static/js/index/search.js
index c4efd43..e432ff5 100644
--- a/static/js/index/search.js
+++ b/static/js/index/search.js
@@ -6,6 +6,7 @@
var $ = require('jquery'),
security = require('../plugin/security'),
+ tip = require('../plugin/tip'),
Hammer = require('yoho.hammer');
var $input = $('#search-input input');
@@ -18,8 +19,11 @@ var $form = $('#search-form');
var $history = $('.history');
var $historySearch = $('.history-search');
-
+var $searchAssociate = $('.search-associate');
var $clearHistory = $('#clear-history');
+var $buriedpoint = $('.buriedpoint');
+var $search = $('#search');
+var $searchItems = $('.search-items');
var writeSearch = require('./write-search');
@@ -42,17 +46,56 @@ $input.on('input', function() {
if ($input.val() === '') {
$icon.css('color', '#b2b2b2');
$clear.addClass('hide');
+ $searchAssociate.html('');
+ $searchItems.show();
} else {
$icon.css('color', '#666');
$clear.removeClass('hide');
}
+
+ // 联动搜索
+ $.ajax({
+ url: 'search/fuzzyDatas',
+ data: {
+ keyword: $input.val()
+ },
+ dataType: 'json',
+ success: function(data) {
+ var ajaxHtml = '';
+ var 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"></i></span></li>';
+ }
+
+ $searchAssociate.html(ajaxHtml);
+ $searchItems.hide();
+ } else {
+ $searchAssociate.html('');
+ }
+
+ $searchAssociate.find('li').on('touchend', function() {
+ $buriedpoint.val($(this).find('.keyword').html());
+ $search.closest('form').submit();
+ });
+ },
+ error: function() {
+ tip.show('网络断开连接了~');
+ }
+ });
});
cHammer = new Hammer($clear[0]);
cHammer.on('tap', function() {
$input.val('').trigger('input');
});
-$('#search').on('touchend', function() {
+$search.on('touchend', function() {
+ if ($buriedpoint.val() === '' && $('#default-terms').val() !== '') {
+ $buriedpoint.val($('#default-terms').val());
+ }
+
if (security.hasDangerInput()) {
return false;
}
diff --git a/static/sass/index/_search.css b/static/sass/index/_search.css
index 458bf9d..a60932e 100644
--- a/static/sass/index/_search.css
+++ b/static/sass/index/_search.css
@@ -73,31 +73,113 @@
white-space: nowrap;
}
- .clear-icon{
+ .clear-icon {
float: right;
background: #fff;
}
- span{
+ span {
margin-right: 5px;
}
- .search-group{
+ .search-group {
border-bottom: 1px solid #e6e6e6;
- margin: 15px 0px;
-
- .search-content-title{
- height: 40px;
- .left{
- float: left;
- }
- .right{
- float: right;
- }
+
+ .ico-hot {
+ width: 22px;
+ height: 30px;
+ display: inline-block;
+ background: url('/search/hot-ico.png') no-repeat;
+ margin-right: 20px;
+ position: relative;
+ top: 2px;
+ }
+
+ h3 {
+ color: #b0b0b0;
+ font-size: 28px;
+ }
+ }
+
+ .search-content-title {
+ height: 40px;
+
+ .ico-lately {
+ width: 26px;
+ height: 26px;
+ display: inline-block;
+ background: url('/search/time-ico.png') no-repeat;
+ margin-right: 20px;
+ position: relative;
+ top: 2px;
+ }
+
+ .ico-del {
+ width: 24px;
+ height: 26px;
+ display: inline-block;
+ background: url('/search/del-ico.png') no-repeat;
+ }
+
+ .left {
+ float: left;
+ }
+
+ .right {
+ float: right;
+ }
+ }
+
+ .search-content{
+ clear: both;
+ padding-left: 47px;
+ box-sizing: border-box;
+ padding-bottom: 18px;
+
+ a {
+ border-radius: 8px;
+ border: 2px solid #b0b0b0;
+ background: #fff;
+ color: #b0b0b0;
+ font-size: 28px;
}
+ }
+
+ .hot-search {
+ margin-top: 38px;
+ }
+ }
+
+ .search-associate {
+ width: 100%;
+ background: #f8f8f8;
+
+ li {
+ height: 84px;
+ line-height: 84px;
+ width: 100%;
+ padding: 0 20px;
+ clear: both;
+ margin-bottom: 5px;
+ background: #fff;
+ box-sizing: border-box;
+ }
+
+ .keyword {
+ float: left;
+ font-size: 30px;
+ }
+
+ .count {
+ float: right;
+ color: #b0b0b0;
+ font-size: 18px;
- .search-content{
- clear: both;
+ i {
+ font-size: 12PX;
+ margin-left: 10px;
+ position: relative;
+ top: 3px;
}
}
}
diff --git a/template/m.yohobuy.com/actions/index/search/index.phtml b/template/m.yohobuy.com/actions/index/search/index.phtml
index 19ac6ee..1ae0549 100644
--- a/template/m.yohobuy.com/actions/index/search/index.phtml
+++ b/template/m.yohobuy.com/actions/index/search/index.phtml
@@ -1,20 +1,22 @@
{{> layout/header}}
<div class="search-page yoho-page">
- {{# search}}
- <div id="search-input" class="search-input">
+ {{# search}}
+ <input type="hidden" value="{{defaultTerms}}" id="default-terms">
+ <div id="search-input" class="search-input">
<form id="search-form" action={{url}} method="get">
<i class="search-icon iconfont"></i>
- <input type="text" placeholder="搜索商品" name="query" data-bp-id="search_page_input_1" class="buriedpoint">
+ <input type="text" placeholder="{{#if defaultTerms}}{{defaultTerms}}{{else}}搜索商品{{/if}}" name="query" data-bp-id="search_page_input_1" class="buriedpoint" autocomplete="off">
<input type="hidden" name="from" value="search">
<i class="clear-input iconfont hide"></i>
<span id="search" class="search buriedpoint" type="submit" data-bp-id="search_index_one_0">搜索</span>
</form>
</div>
+ <ul class="search-associate"></ul>
<div class="search-items">
<div class="search-group history-search hide">
<div class="search-content-title">
- <h3 class="left">最近搜索</h3>
- <i id="clear-history" class="right iconfont hide"></i>
+ <h3 class="left"><i class="ico-lately"></i>最近搜索</h3>
+ <i id="clear-history" class="right ico-del hide"></i>
</div>
<div class="search-content">
<ul class="history clearfix"></ul>
@@ -22,14 +24,16 @@
</div>
{{#if hotTerms}}
<div class="search-group hot-search">
- <h3>热门搜索</h3>
- <ul class="hot clearfix">
- {{# hotTerms}}
- <li>
- <a href='/?query={{content}}'>{{content}}</a>
- </li>
- {{/ hotTerms}}
- </ul>
+ <h3><i class="ico-hot"></i>热门搜索</h3>
+ <div class="search-content">
+ <ul class="hot clearfix">
+ {{# hotTerms}}
+ <li>
+ <a href='/?query={{content}}'>{{content}}</a>
+ </li>
+ {{/ hotTerms}}
+ </ul>
+ </div>
</div>
{{/if}}
</div>
diff --git a/template/m.yohobuy.com/partials/product/list.phtml b/template/m.yohobuy.com/partials/product/list.phtml
index da510ce..ffd0e36 100644
--- a/template/m.yohobuy.com/partials/product/list.phtml
+++ b/template/m.yohobuy.com/partials/product/list.phtml
@@ -57,12 +57,21 @@
{{/ brandHome}}
<ul id="list-nav" class="list-nav clearfix">
+ {{#if isSearch}}
+ <li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">
+ <a href="javascript:void(0);">
+ <span class="nav-txt">默认</span>
+ <span class="iconfont cur"></span>
+ </a>
+ </li>
+ {{else}}
<li class="new active buriedpoint" data-bp-id="shop_listnav_new_1">
<a href="javascript:void(0);">
<span class="nav-txt">最新</span>
<span class="iconfont cur"></span>
</a>
</li>
+ {{/if}}
<li class="price buriedpoint" data-bp-id="shop_listnav_price_1">
<a href="javascript:void(0);">
<span class="nav-txt">价格</span>
diff --git a/yohobuy/m.yohobuy.com/application/controllers/Search.php b/yohobuy/m.yohobuy.com/application/controllers/Search.php
index c737204..bc6c33c 100644
--- a/yohobuy/m.yohobuy.com/application/controllers/Search.php
+++ b/yohobuy/m.yohobuy.com/application/controllers/Search.php
@@ -211,6 +211,9 @@ class SearchController extends AbstractAction
$this->setNavHeader($condition['title'], true, SITE_MAIN);
}
+ // 搜索列表将最新改成默认的标识
+ $data['isSearch'] = true;
+
$this->_view->display('list', $data);
}
--
libgit2 0.24.0