找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1223|回复: 0

[分享] dede搜索框如何实现对应的下拉式搜索

[复制链接]
发表于 2018-1-28 11:12:31 | 显示全部楼层 |阅读模式 来自 中国–河南–南阳
1G43V594-0.webp
那么这样的效果是如何实现的呢?我们还是分布来教一教大家吧:
第一步:找到导航分类搜索的地方,然后按照下面的格式添加,这里说明哈是:data-id是指栏目的id,data-lid是指模型的lid;其他就没有什么要注意的了。
<div class="s-select"> <span class="select-hd"><i></i>攻略/游记</span>
<ul class="select-bd hide" style="z-index:99999">
<li class="abc dhy"><a href="javascript:;" data-id='1' data-lid='17'>攻略/游记</a></li>
<li class="abc "><a href="javascript:;" data-id='2' data-lid='18'>景点/风景</a></li>
<li class="abc "><a href="javascript:;" data-id='3' data-lid='19'>美食/餐厅</a></li>
<li class="abc "><a href="javascript:;" data-id='4' data-lid='20'>门票</a></li>
</ul>
</div>

第二:我们要用jquery来实现这样的效果,就是点击分类板块,能够成功切换并且能够成功替换相应的汉字,这里还是详细分析哈吧,万一有的同学没有接粗过jquery,还是看起来不太懂的。这里的.s-select都是上面的div里面的class样式,mouseenter()和moueseleave()表示jquery里面的2个鼠标事件,线面的hide()和show()也是隐藏和显示时间,表示,选中某个属性,对应的地方显示隐藏。讲的有点粗糙,但是意思是这么个意思。在文档最后,我会把jquery中文手册附件给大家,供大家学习参考。
$(".s-select,.select-bd").mouseenter(function(e) {
$(".select-bd").show();
});
$(".s-select,.select-bd").mouseleave(function(e) {
$(".select-bd").hide();
});
$(".abc a").click(function(e) {
var neirong = $(this).html(); //这个是获取点击下拉框里面的文字
//alert(neirong);//neirong.show();
$(".select-hd ").html(neirong); //这个是把获取到的下拉框里面的文字重新给select-hd这个内容器里面去
});

第三步:想把法把下拉样式里面传的data-id以及data-lid的值获取到并且传到对应的搜索php文件里面去。
$(function(){
$(".s-select li").click(function(){
$(this).addClass("dhy").siblings().removeClass("dhy");
});
})
$(".s-select a").click(function(){
$("input[name='typeid']").val($(this).attr("data-id")); //获取到搜索表单里面下拉框中的typeid
$("input[name='lid']").val($(this).attr("data-lid")) //获取到搜索表单里面下拉框中的lid
});
$("a.s-button").click(function(){
$("#head-search-form").submit(); //这个在完成搜索提交搜索框框的时候,找到对应的表单
});

还有值得注意的是,我们要再搜索表单的开始部分添加上:<input type="hidden" name="typeid" value="1" /> 让我们的表单获取到对应的typeid的值!

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-22 15:03 , Processed in 0.045246 second(s), 7 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表