fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by ccbikai
Commit 4775d447904b38ea5900233812e17784571cfe17 1 parent 6a5d0d57

品牌搜索

Inline Side-by-side
Showing 4 changed files with 133 additions and 59 deletions
... ... @@ -16,7 +16,11 @@ var searchH = $('.newbrand-search').outerHeight(),
headerH = $('.yoho-header').outerHeight(),
brandSwipe = parseInt(searchH) + parseInt(headerH) - 1;
var myHammer;
var myHammer,
searchHammer,
clearTextHammer,
brandsData,
$keyword;
swiper = new Swiper('.swiper-container', {
lazyLoading: true,
... ... @@ -32,27 +36,25 @@ $('.yoho-header').css({
});
$('.banner-top').css('padding-top', '90px');
if ($brandList.length > 0) {
$(window).scroll(function() {
var scrTop = $(window).scrollTop();
$('.brand-list').each(function() {
var offTop = $(this).offset().top - brandSwipe;
if (scrTop >= offTop) {
$brandList.find('.title-bar').css('position', 'static');
$(this).find('.title-bar').css({
position: 'fixed',
top: brandSwipe
});
} else {
$(this).find('.title-bar').css('position', 'static');
}
});
$(window).scroll(function() {
var scrTop = $(window).scrollTop();
$('.brand-list').each(function() {
var offTop = $(this).offset().top - brandSwipe;
if (scrTop >= offTop) {
$brandList.find('.title-bar').css('position', 'static');
$(this).find('.title-bar').css({
position: 'fixed',
top: brandSwipe
});
} else {
$(this).find('.title-bar').css('position', 'static');
}
});
}
});
if ($('#right-bar .con').find('b').unbind()[0]) {
function rightBarBindClick() {
myHammer = new Hammer($('#right-bar .con').find('b').unbind()[0]);
myHammer.on('tap', function(e) {
var index = $(this).index();
... ... @@ -63,49 +65,118 @@ if ($('#right-bar .con').find('b').unbind()[0]) {
});
}
function searchResult(type) {
var keyword = $('#keyword').val(),
gender = $('#gender').val();
if ($('#right-bar .con').find('b').unbind()[0]) {
rightBarBindClick();
}
/**
* 品牌搜索
*/
function searchResult() {
var keyword = ($keyword.val() + '').toLowerCase();
var result = {},
i = 0,
rightBarHtml,
html = '';
// 遍历首字母搜索
$.each(brandsData, function(k, v) {
if ($.isArray(v)) {
// 遍历品牌，进行匹配
$.each(v, function(i, brand) {
if (brand.name.toLowerCase().indexOf(keyword) > -1) {
result[k] = result[k] || [];
result[k].push(brand);
}
});
}
});
// 根据搜索结果生成 HTML
rightBarHtml = '<div id="right-bar" class="right-bar"><div class="con" id="con">';
$.each(result, function(k, v) {
var brandHtml = ['<div class="brand-list bar-', i, '">'];
i++;
brandHtml.push('<div class="title-bar"><h2>');
brandHtml.push(k);
brandHtml.push('</h2></div>');
$.each(v, function(i, brand) {
brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
if (brand.isNew) {
brandHtml.push('<i class="icon-hot">Hot</i>');
}
if (brand.isHot) {
brandHtml.push('<i class="icon-new">New</i>');
}
brandHtml.push('</a></p>');
});
brandHtml.push('</div>');
html += brandHtml.join('');
$.get('/brands/search', {
keyword: keyword,
gender: gender,
type: type
}, function(html) {
$('.search-result').html(html);
if (k.indexOf(0) > -1) {
k = '#';
}
rightBarHtml = rightBarHtml + '<b>' + k + '</b>';
});
rightBarHtml += '</div>';
if (Object.keys(result).length > 0) {
html += rightBarHtml;
}
// 插入 dom，绑定事件
$('.search-result').html(html);
if (Object.keys(result).length > 0) {
rightBarBindClick();
}
}
$('#keyword').on('keyup', function() {
searchResult(0);
}).on('keydown', function() {
$(this).closest('.search-box').css('width', '11.25rem');
$('.search-action').show();
}).on('blur', function() {
$(this).closest('.search-box').css('width', '12.5rem');
$('.search-action').hide();
});
if ($('.brand-search-page').length) {
brandsData = $.parseJSON($('#brands-data').html());
$keyword = $('#keyword');
$keyword.on('input', function() {
if ($keyword.val().length) {
searchResult();
$(this).closest('.search-box').css('width', '11.25rem');
$('.search-action').show();
} else {
$(this).closest('.search-box').css('width', '12.5rem');
$('.search-action').hide();
}
});
$('#search-btn').on('tap', function() {
searchResult(1);
});
searchHammer = new Hammer($('.search-btn')[0]);
searchHammer.on('tap', function() {
searchResult();
return false;
});
$('.clear-text').on('tap', function() {
$('#keyword').val('').trigger('input');
});
clearTextHammer = new Hammer($('.clear-text')[0]);
clearTextHammer.on('tap', function() {
$keyword.val('').trigger('input');
return false;
});
$('form.search-box').on('submit', function() {
return false;
});
$('form.search-box').on('submit', function() {
return false;
});
$('.clear-history').on('tap', function() {
// clearHistoryHammer = new Hammer($('#clear-text')[0]);
// clearHistoryHammer.on('tap', function() {
// setcookie('h_brands', '', {
// expire: -1,
// path: '/',
// domain: '.m.yohobuy.com'
// // setcookie('h_brands', '', {
// // expire: -1,
// // path: '/',
// // domain: '.m.yohobuy.com'
// // });
// $('#history-keyword').remove();
// $(this).hide();
// });
$('#history-keyword').remove();
$(this).hide();
});
}
... ...
... ... @@ -160,4 +160,7 @@
.con {
padding-top: 10rem / $pxConvertRem;
}
.search-result {
padding-top: 176rem / $pxConvertRem;
}
}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="brand-page yoho-page">
<div class="brand-page brand-search-page yoho-page">
<div class="newbrand-search">
<form class="search-box clearfix">
<input type="text" class="search-input" id="keyword" placeholder="查找品牌">
<input type="hidden" id="gender" name="gender" value="1,3">
<i class="search-icon iconfont">&#xe60f;</i>
<div class="search-action">
<span class="iconfont clear-text">&#xe623;</span>
... ... @@ -15,7 +14,7 @@
<div class="search-result">
</div>
</div>
<script type="text/tmpl">
<script id="brands-data" type="text/tmpl">
{{{brandList}}}
</script>
{{> layout/footer}}
... ...
... ... @@ -117,7 +117,8 @@ class BrandModel
public static function getBrandForSearch($channel)
{
$result = array();
// 模板中的使用JS标识
$result['brandPage'] = true;
$brand = BrandData::getBrandsData($channel);
if (!empty($brand['data']['brands'])) {
$list = array();
... ...