diff --git a/static/js/index/search.js b/static/js/index/search.js index ca45fbb..997eed9 100644 --- a/static/js/index/search.js +++ b/static/js/index/search.js @@ -10,18 +10,20 @@ var $input = $('#search-input input'); var $clear = $('#search-input .clear-input'); +var $form = $('#search-form'); + var $history = $('.history'); -$('#clear-history').bind('tap', function() { - $.ajax({ - type: 'POST', - url: '/search/clearHistory', - success: function(data) { - if (data.code === 200) { - $history.html(''); //clear search history items - } - } - }); +var $clearHistory = $('#clear-history'); + +var writeSearch = require('./write-search'); + +var ranToken = writeSearch.getRanToken(); + +$clearHistory.bind('tap', function() { + localStorage.removeItem('historys'); + + $history.html(''); }); $input.bind('input', function() { @@ -34,4 +36,33 @@ $input.bind('input', function() { $clear.bind('tap', function() { $input.val('').trigger('input'); -}); \ No newline at end of file +}); + +//初始化历史搜索的内容 +(function() { + var html = '', + history, + historys, i; + + if (localStorage) { + historys = localStorage.getItem('historys'); + + if (historys && historys.length > 0) { + historys = historys.split(ranToken); + for (i = 0; i < historys.length; i++) { + history = historys[i]; + + if (history === '') { + continue; + } + + html += '<li><a href="?query=' + history + '">' + history + '</li>'; + } + + $history.html(html); + $clearHistory.removeClass('hide'); + } + } +}()); + +writeSearch.bindWirteLocal($form); \ No newline at end of file diff --git a/static/js/index/write-search.js b/static/js/index/write-search.js new file mode 100644 index 0000000..dcddee8 --- /dev/null +++ b/static/js/index/write-search.js @@ -0,0 +1,42 @@ +/** + * 将搜索结果存localStorage + * @author: xuqi<qi.xu@yoho.cn> + * @date: 2015/10/29 + */ + +var ranToken = ' ??++ '; + +//获取分隔符 +function getRanToken() { + return ranToken; +} + +//绑定提交前的存local操作 +function bindWirteLocal($form) { + $form.on('submit', function() { + var query = this.query.value, + historys; + + if (localStorage) { + historys = localStorage.getItem('historys'); + + historys = historys ? historys : ''; + + if (historys.indexOf(ranToken + query + ranToken) > -1) { + return; + } + + if (historys === '') { + query = ranToken + query; + } + + historys += query + ranToken; + + localStorage.setItem('historys', historys); + } + }); +} + +exports.getRanToken = getRanToken; + +exports.bindWirteLocal = bindWirteLocal; \ No newline at end of file diff --git a/static/js/product/list.js b/static/js/product/list.js index 6ec5952..cbf3a57 100644 --- a/static/js/product/list.js +++ b/static/js/product/list.js @@ -13,6 +13,8 @@ var $brandHeader = $('#brand-header'), var filter = require('../plugin/filter'); +var writeSearch = require('../index/write-search'); + var tip = require('../plugin/tip'); var loading = require('../plugin/loading'); @@ -210,6 +212,8 @@ lazyLoad($('.lazy')); filter.registerCbFn(search); +writeSearch.bindWirteLocal($('#search-form')); + //导航栏点击逻辑说明: //1.点击非active项时切换active状态 //2.价格和折扣active状态时继续点击切换排序 diff --git a/template/m.yohobuy.com/actions/index/search/index.phtml b/template/m.yohobuy.com/actions/index/search/index.phtml index fe2bbc6..6d8944c 100644 --- a/template/m.yohobuy.com/actions/index/search/index.phtml +++ b/template/m.yohobuy.com/actions/index/search/index.phtml @@ -2,7 +2,7 @@ <div class="search-page yoho-page"> {{# search}} <div id="search-input" class="search-input"> - <form action="/product/list/index" method="get"> + <form id="search-form" action={{url}} method="get"> <i class="search-icon iconfont"></i> <input type="text" placeholder="搜索商品" name="query"> <i class="clear-input iconfont hide"></i> @@ -10,7 +10,7 @@ </form> </div> <div class="search-items"> - <div class="hot-search"> + <div class="hot-search hide"> <h3>热门搜索</h3> <ul class="hot clearfix"> {{# hot}} @@ -22,15 +22,9 @@ </div> <div class="history-search"> <h3>历史搜索</h3> - <ul class="history clearfix"> - {{# history}} - <li> - <a href={{url}}>{{name}}</a> - </li> - {{/ history}} - </ul> + <ul class="history clearfix"></ul> </div> - <button id="clear-history" class="clear-history">清空搜索历史</button> + <button id="clear-history" class="clear-history hide">清空搜索历史</button> </div> {{/ search}} </div> diff --git a/template/m.yohobuy.com/partials/product/list.phtml b/template/m.yohobuy.com/partials/product/list.phtml index 2a0e635..5752af8 100644 --- a/template/m.yohobuy.com/partials/product/list.phtml +++ b/template/m.yohobuy.com/partials/product/list.phtml @@ -1,7 +1,7 @@ {{# goodList}} {{# search}} <div id="search-input" class="search-input"> - <form action={{url}} method="get"> + <form id="search-form" action={{url}} method="get"> <i class="search-icon iconfont"></i> <input type="text" value={{default}} name="query"> <i class="clear-input iconfont hide"></i>