页面逻辑分析：
1、1,2,3类关键词tab切换
2、当点击关键词时，要将该关键词ID保存到一个数组中(提交后台)，文字要展示到页面上去，类似加入购物车
3、点击删除按钮可以从已选关键词删除，删除数组中关键词ID和页面展示的文字内容
4、点击下一步跳转购买页面，通过form表单，将数据拼接到url进行传递，后台根据url参数渲染数据
1、关键词切换
//页面结构：大致就是这样
<ul class="nav">
<li class="active">一类关键词</li>
<li>二类关键词</li>
<li>三类关键词</li>
</ul>
<ul class="wrap">
<li class="list">一类关键词默认显示</li>
<li class="list" style="display:none;">二类关键词显示</li>
<li class="list" style="display:none;">三类关键词显示</li>
</ul>
//1，2，3类关键tab切换
//给ul上的li绑定点击事件，获取到当前点击的index
$('.nav').on('click','li',function(event){
var index = $(this).index();
$(".nav li").eq(index).addClass("active").siblings().removeClass("active");//li高亮切换
$(".wrap .list").eq(index).addClass("show").siblings().removeClass("show");//对应的盒子显示
});
2、点击关键词保存ID页面展示文字内容
//点击关键词，加入已选关键词容器
var codeArr=[];//所有已选关键词的ID存入codeArr
var Dom = $('#js-key-wrap');//需要追加到页面的位置
var html='';//页面展示文字拼接
//.get-key li就是所有关键词，这里可以拿到自定义属性data-id关键词ID，和点击的文本
$('.get-key li').click(function(event){
var code = this.getAttribute('data-id');//关键词id
var text = event.target.innerText;//关键词，页面展示
//如果codeArr.length>0说明此时已经存有关键词，防止重复添加这里需要进行判断
if(codeArr.length>0){
//判断当前点击项id是否和数组中的id相等，
for(var i=0;i<codeArr.length;i++){
if(code == codeArr[i]){
return false;
}
}
//如果不相等则正常存id，将拼好的html追加到页面Dom位置
codeArr.push(code)//关键字ID存入数组
html = '<li data-id="'+code+'"><span>'+ text +'</span><i>×</i></li>'//页面展示已选关键词
Dom.append(html);//追加到页面
}else{
//第一次点击关键词，直接存入
codeArr.push(code)
html = '<li data-id="'+code+'"><span>'+ text +'</span><i>×</i></li>'
Dom.append(html);
$('#js-key').css({//已选关键词盒子显示。
'position':'fixed',
'display':'block'
})
}
});
3、删除已选关键词
//为已选关键词 i添加点击事件，i标签是×号
$('#js-key-wrap').on('click','li i',function(event){
$(this).parents('li').remove(); // 从页面删除当前点击的父元素li
for(var i=0;i<codeArr.length;i++){
//判断当前点击的id和codeArr数组中第[i]项id是否相等
if($(this).parents('li').data("id") == codeArr[i]){
codeArr.splice(i, 1); //删除当前项
}
}
//如果全部删除，关键词盒子隐藏
if(codeArr.length == 0){
$('#js-key').css({
'position':'fixed',
'display':'none'
})
}
})
4、点击下一步form标签跳转到购买页面，并将已选关键词id拼接到URL上
//html部分：
<form action="../keywords/buy_key.html" method="get">
<input type="text" name="key_code" id="key_code" value="" hidden />
<input class="submit js-submit" type="submit" value="下一步">
</form>
$('.js-submit').click(function(){
$('#key_code').val(codeArr);//数组中id赋值给id="key_code"
})
搜索逻辑分析：
1、页面引入bootstrap-typeahead.js文本能自动补全插件
2、定义一个对象obj用于存储1,2,3类关键词
3、搜索关键词逻辑部分
4、用户点击搜索和回车搜索
1、bootstrap-typeahead.js插件使用引入,需要引入JQ
<script src="../../js/common/jquery-3.2.1.min.js"></script>
<script src="../../js/common/bootstrap-typeahead.min.js"></script>
var keywordData = [];//页面所有分类数据，存入数组，用于数据匹配
//将所有li的文本内容存入keywordData
$('.js-get-key li').each(function(index,val){
keywordData.push($(val).text())
//['关键词1','关键词2','关键词3']
})
function parseLocalArrayData() {
$("#keyval").typeahead({
source: keywordData, //数据源
items: 8, //最多显示个数
delay: 500 //延迟时间
});
}
parseLocalArrayData()//执行该事件
//页面使用
<input id="keyval" autocomplete="off" data-provide="typeahead" type="text" placeholder="请输入">
<button class="btn1 g-fl js-key-search">搜索</button>
2、定义对象，存储关键词
var obj ={
class1:[],//1类
class2:[],//2类
class3:[],//3类
}
var class1 = $('#class1 .js-get-key li');//获取1类关键词，将id和文本存入obj.class1
class1.each(function(index,val){
var key1={
id:class1[index].dataset.id,
text:class1[index].innerText,
}
obj.class1.push(key1)
})
var class2 = $('#class2 .js-get-key li');//获取2类关键词，将id和文本存入obj.class2
class2.each(function(index,val){
var key2={
id:class2[index].dataset.id,
text:class2[index].innerText,
}
obj.class2.push(key2)
})
var class3 = $('#class3 .js-get-key li');//获取2类关键词，将id和文本存入obj.class3
class3.each(function(index,val){
var key3={
id:class3[index].dataset.id,
text:class3[index].innerText,
}
})
obj.class3.push(key3)
//得到数据如下格式：
obj{
class1:[
{
id:1,
text:'关键词1',
},
{
id:2,
text:'关键词2',
}
],
}
3、搜索逻辑部分，
function search_key (){
var key_val = $('#keyval').val();//搜索值
if (key_val == '') {
layer.msg('请输入搜索内容')
}else if(keywordData.indexOf(key_val) == -1){//如果关键词数组keywordData中没有key_val关键词则会返回-1
layer.msg('暂无该关键词')
} else {
console.log('搜索成功');
//obj_1存储被搜索到的关键字
var obj_1 = {
class_1:null,
id:'',
text:'',
}
$(obj.class1).each(function(index,val){ //循环1类数据
if(val.text == key_val){ //关键词与输入的搜索关键词相同
$(".nav li").eq(0).addClass("active").siblings().removeClass("active");//当前1类高亮
$(".wrap .list").eq(0).addClass("show").siblings().removeClass("show");//显示1类模块
var dom = $('#class1 .item li[data-id='+val.id+']');//获取关键词所在页面位置
$('html , body').animate({ //设置页面平滑滚动到该关键词
scrollTop: dom[0].offsetTop -200
}, '500',function(){
setTimeout(function(){
dom.addClass('scarv');//滚动过后添加类名，缩放动画
},'100')
setTimeout(function(){
dom.removeClass('scarv')//删除动画
},'1000')
});
obj_1.class_1 = 1; //关键词1类
obj_1.id = val.id; //搜索的关键词ID
obj_1.text = val.text; //搜索的关键词
return false;
}
})
$(obj.class2).each(function(index,val){
if(obj_1.class_1){//如果obj_1.class_1已经存在，说明已经搜索到，就停止搜索
return false;
}else{
if(val.text == key_val){
$(".nav li").eq(1).addClass("active").siblings().removeClass("active");
$(".wrap .list").eq(1).addClass("show").siblings().removeClass("show");
var dom = $('#class2 .item li[data-id='+val.id+']');
$('html , body').animate({
scrollTop: dom[0].offsetTop -200
}, '500',function(){
setTimeout(function(){
dom.addClass('scarv');
},'100')
setTimeout(function(){
dom.removeClass('scarv')
},'1000')
});
obj_1.class_1 = 2;
obj_1.id = val.id;
obj_1.text = val.text;
return false;
}
}
})
$(obj.class3).each(function(index,val){
if(obj_1.class_1){
return false;//如果obj_1.class_1已经存在，说明已经搜索到，就停止搜索
}else{
if(val.text == key_val){
$(".nav li").eq(2).addClass("active").siblings().removeClass("active");
$(".wrap .list").eq(2).addClass("show").siblings().removeClass("show");
var dom = $('#class3 .item li[data-id='+val.id+']');
$('html , body').animate({
scrollTop: dom[0].offsetTop -200
}, '500',function(){
setTimeout(function(){
dom.addClass('scarv');
},'100')
setTimeout(function(){
dom.removeClass('scarv')
},'1000')
});
obj_1.class_1 = 3;
obj_1.id = val.id;
obj_1.text = val.text;
return false;
}
}
})
}
}
4、点击搜索和回车搜索
//判搜索框输入的值
$(".js-key-search").click(function() {
search_key();
});
//用户搜索关键词回车事件
if($('.js-key-search').length > 0){
document.onkeydown=function(ev){
var event=ev ||event
if(event.keyCode==13){
search_key();
}
};
}
//点击热门关键词搜索
$('.js-hot-key').on('click','li',function(){
var text = $(this)[0].innerText;//获取当前点击的文字内容
$('#keyval').val(text)//将文字内容赋值给输入框
$('.js-key-search').trigger('click');//触发搜索事件
})
